到2023年3月，有些之前的解决方法已经更新，
1、vite 跨域 cors 开发配置
现在不用再新创建 vue.config.js 文件，直接在 vite.config.js 文件中即可配置：
server: {
// host: '0.0.0.0',
// open: false,
cors: true,
proxy: {
'/api' : {
target: 'https://www.google.com/', // 需要访问的服务器地址
changeOrigin: true,
rewrite: path => path.replace('/api', '')
}
}
}
后续的网络请求直接访问 '/api' 就可跳转到 google 服务器
2、返回上一页特定位置
按照官方的代码，在 router 的 main.js 配置文件中
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [...],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})
会无法自动恢复到该位置，有可能偏差，
如果使用 smooth 滚动，每次都滚动又容易眼花，这里需要改动一下 scrollBehavior 行为如下：
scrollBehavior(to, from, savedPosition) {
return new Promise( (res, rej) =>{
setTimeout(() => {
if (savedPosition) {
// savedPosition.behavior = 'auto'
res( savedPosition )
} else {
res( { top: 0 } )
}
}, 50)
})
},
3、keep-live 在路由中的变化
官方推荐的写法，
image.png
对于不许要每次进入都重复载入的页面，如列表页等，需要记录用户上次滚动到的位置，或从详情页返回的情况，不要重复读取服务器，这里可以配置成如下
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import V04 from './views/V04.vue'; // 这个V04就是不要重复读取的组件
</script>
<router-view v-slot="{ Component }">
<transition>
<keep-alive :exclude="[V04]" >
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
exclude 这里接收的是一个数组，可以插入多个页面组件
4、使用 onActivated
从列表跳入到详情页面时，onUpdated 函数可能会被触发两次，这时候可以使用 onActivated，保证进入页面时只会读取一次，
<script setup>
import { onActivated, reactive } from 'vue';
import { useRoute } from 'vue-router'
// const {query} = useRoute()
const rr = useRoute()
let query = reactive({})
query.img = rr.query.img
query.ti = rr.query.title
onActivated(() => {
console.log('传入的内容', rr) // 换用 onActivated 后会发现只触发一次
query.img = rr.query.img
query.ti = rr.query.title
})
</script>
5、element plus UI库中无限滚动 Infinite Scroll
案例中的 ul 中 style="overflow: auto;" 可能会造成无限加载：
<script setup>
import axios from 'axios'
import { reactive, onActivated, onDeactivated } from 'vue'
import { Search } from '@element-plus/icons-vue'
const params = reactive({
start: 0,
xml_len: 48,
query: '宠物',
isLoading: false
})
</script>
<template>
<div>
<el-input v-model="params.query" placeholder="Please input">
<template #append>
<el-button :icon="Search" @click="Reload" />
</template>
</el-input><br><br>
<div class="bg">
<ul v-infinite-scroll="GetData"
:infinite-scroll-disabled="params.isLoading"
:infinite-scroll-delay="200" class="infinite-list">
<RouterLink v-for="i in list" :to="'/v04ss?img=' + i.img + '&title=' + i.title">
<img :src="i.img" />
</RouterLink>
</ul>
<div v-if="params.isLoading">loading...</div>
</div>
</div>
</template>
<style scoped>
.infinite-list {
height: 300px;
padding: 0;
margin: 0;
list-style: none;
}
</style>
6、router 动画部分
和之前差不多，要求每个页面 view 组件都被包裹在一个元素中：
在 RouterView 引入的地方加入 name，为 css 中动画名字
<router-view v-slot="{ Component }">
<transition name="slide-fade">
<keep-alive :exclude="[V04]" >
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
在全局的 main.css 中加入动画，这里是官方配置了
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
使用的库版本如下
"dependencies": {
"axios": "^1.3.4",
"element-plus": "^2.3.1",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.1.4"
}
