Vue3路由缓存问题解决

路由缓存问题

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

缓存问题：当路由path一样，参数不同的时候会选择直接复用路由对应的组件

解决方案：

1. 给 routerv-view 添加key属性，破坏缓存
2. 使用 onBeforeRouteUpdate钩子函数，做精确更新

破坏缓存

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

精确更新

使用onBeforeRouteUpdate导航钩子，onBeforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

const categoryData = ref({})
const route = useRoute()
const getCategory = async (id = route.params.id) => {
  // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
  const res = await getTopCategoryAPI(id)
  categoryData.value = res.result
}
//路由参数变化的时候，可以把分类数据接口重新发送
onBeforeRouteUpdate(((to) => {
  //to:可以获取即将跳转的路由路径和参数等
  getCategory(to.params.id)
}))