路由缓存问题的产生
VueRouter允许用户在页面中创建多个视图（多级路由），并根据路由参数来动态的切换视图。使用带参数的路由时，相同的组件实例将被重复使用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得高效。不过，这也意味着组件的生命周期钩子不会被调用。如下导航栏：
路由缓存带来的问题
- 内存消耗：缓存页面组件可能导致内存占用增加。
- 数据过时：如果缓存的页面状态不及时更新，用户可能会看到过时的数据。
- 交互问题：页面状态被保留可能导致一些交互问题。比如在某个路由上打开了一个弹出窗口，在切换路由后回来，弹出窗口可能仍然显示。
- 生命周期问题：缓存的组件实例可能不会像重新创建的实例那样触发生命周期钩子，如onMounted，这可能会影响一些功能的正常运行。
路由缓存问题的解决方法
方案一：给router-view添加key
以当前路由完整的路径为key的值，给router-view组件绑定。
<!-- 添加key 破坏复用机制 强制销毁重建 -->
<RouterView :key="$route.fullPath" />
<!-- <RouterView /> -->方案二：使用beforeRouteUpdate导航钩子
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可。或者使用beforeRouteUpdate导航守卫，取消导航。
模版：
const User = {
template: '...',
async beforeRouteUpdate(to,from) {
//对路由变化做出响应
this.userData = await fetchUser(to.params.id)
},
}案例：vue-rabbit: Vue3组合式API小兔鲜项目
import { getCategoryAPI } from '@/apis/category'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getBannerAPI } from '@/apis/home'
import GoodsItem from '../Home/components/GoodsItem.vue'
import { onBeforeRouteUpdate } from 'vue-router'
// 获取数据
const categoryData = ref({})
// 获取路由参数
const route = useRoute()
// console.log(route)
// 如果传了参数 就以传来的参数为准 如果没有 就以默认参数route.params.id
const getCategory = async (id = route.params.id) => {
const res = await getCategoryAPI(id)
categoryData.value = res.result
}
onMounted(() => {
getCategory()
})
// 获取banner
const bannerList = ref([])
const getBanner = async () => {
const res = await getBannerAPI({
distributionSite: '2'
})
console.log(res)
bannerList.value = res.result
}
onMounted(() => {
getBanner()
})
// 目标：路由参数变化的时候 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=> {
// console.log("路由变化了");
// console.log(to);
getCategory(to.params.id)
})两种方案的选择
如果在意性能问题，则选择beforeRouteUpdate ，精细化控制。
如果不在意性能问题，选择key，简单粗暴。
