Vue3解决路由缓存问题
什么是路由缓存
响应路由参数的变化
使用带有参数的路由时需要注意的是，当用户从 /users/johnny导航到 /users/jolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
问题:一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新
演示：
由上面两张图片可以看出我们切换了页面的分类，并且id也发生了变化，但是页面却还是一样的
解决问题的思路:1.让组件实例不复用，强制销毁重建 2.监听路由变化，变化之后执行数据更新操作
方案一:给router-view添加key
以当前路由完整路径为key的值，给router-view组件绑定
最常见的用例是与 v-for 结合:
<!-- 添加key 破坏复用机制 强制销毁重建 --><RouterView :key="$route.path" />也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用:
- 在适当的时候触发组件的生命周期钩子
- 触发过渡
代码:
<!-- 添加key 破坏复用机制 强制销毁重建 --><RouterView :key="$route.path" />
这时我们就发现这两个不同的分类给我们展示了不同的页面
弊端：它把整个示例都销毁重建了，所以组件的所有请求都会重新发送这样就造成了一定的资源浪费(因为有一些数据可能是不需要改变的比如banner图，不管在哪个分类下展示的banner图都是一样的)
方案二:使用beforeRouteUpdate导航钩子
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可
使用示例
import { onBeforeRouteUpdate } from 'vue-router';
// 获取路由参数
const route = useRoute()
const routeId = route.params.idconst categoryData = ref({})
const getCategoryList = async (id = routeId) => {const res = await getCategory(id)console.log(res)categoryData.value = res.result
}onMounted(() => {// 第一次调用的时候不用传递参数，让他使用默认的getCategoryList()
})// 目标：路由参数发生变化时 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=>{console.log('路由发生变化了');// 存在问题：使用最新的路由参数请求最新的分类数据
//（从名字before可以看出是跳转之前所执行的，route.params.id有一定的滞后性，所以不能直接用route.params.id）console.log(to);getCategoryList(to.params.id)
})总结:
1.路由缓存问题产生的原因是什么?
路由只有参数变化时，会复用组件实例
2.俩种方案都可以解决路由缓存问题，如何选择呢？
在意性能问题，选择onBeforeUpdate,精细化控制不在意性能问题，选择key，简单粗暴