vue中路由缓存问题

问题：在使用带参数的路由时，当用户从 /users/1 导航到 /users/2 相同的组件实例将被重复使用，因为两个路由都渲染同个组件，比起销毁在创建，复用则显得更加高效，不过，这也意味着组件的生命周期钩子不会被调用。

在导航分类栏点击切换时，复用之前渲染好的组件，里面的生命周期钩子不会被调用，导致数据不会更新，还是之前的数据。

解决方法思路：

1、让组件实例不复用，强制销毁重建

以当前路由完整路径为key的值，给router-view组件绑定

 <!-- 添加key，破坏复用机制，强制销毁重建 -->
  <RouterView :key="$route.fullPath"/>

vue中的key最常见的永利是与v-for结合使用

也可以用于强制替换一个元素/组件而不是复用它

缺陷：这个方法，直接将整个组件全部强制销毁重建，组件内有些渲染过，不需要更改数据的部分也要重新渲染

2、监听路由变化，变化之后执行数据更新操作

使用路由守卫onBeforeRouteUpdate，再次调用需要刷新的接口

//  获取数据
const categoryData = ref({})
const route = useRoute()
const getCategogy = async (id=route.params.id)=>{
    const res = await getCategoryAPI(id)
    categoryData.value = res.data.result
}
onMounted(()=>{getCategogy()})
onBeforeRouteUpdate((to)=>{
  // 存在问题：使用最新的路由参数请求最新的分类数据，用to.params.id
  getCategogy(to.params.id) //重新调用接口函数
})

总结：

1.路由缓存问题产生的原因是什么？
路由只有参数变化时，会复用组件实例

2.俩种方案都可以解决路由缓存问题，如何选择呢？
在意性能问题，选择onBeforeUpdate,精细化控制
不在意性能问题，选择key,简单粗暴