vue路由缓存问题

什么是路由缓存问题

解决方案：

1. 让组件实例不再复用，强制销毁重建
2. 监听路由变化，变化之后执行数据更新操作

方法一

给 routerv-view 添加key属性，强制不添加缓存，破坏缓存，所以这个方法性能会比较差

<RouterView :key="$route.fullPath"/>

方法二

使用 onBeforeRouteUpdate钩子函数，做精确更新

没用onBeforeRouteUpdate前的渲染

//获取组件内部的路由参数，用useRoute
const route = useRoute()
const categoryData = ref([])
const getCategory = async ()=>{
  // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
  const res = await getTopCategoryAPI(route.params.id)
  categoryData.value = res.result
}
onMounted(()=>getCategory())

用onBeforeRouteUpdate后

//获取组件内部的路由参数，用useRoute
const route = useRoute()
const categoryData = ref([])

//如果调用该函数时没有传入 id，则默认使用 route.params.id 的值。
const getCategory = async (id = route.params.id)=>{
  // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
  const res = await getTopCategoryAPI(id)
  categoryData.value = res.result
}
onMounted(()=>getCategory())

onBeforeRouteUpdate((to)=>{
  //to 是即将进入的路由对象
  getCategory(to.params.id)
})