到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"
  }