路由缓存问题

路由缓存问题

使用带有参数的路由时，路由只有参数变化，相同的组件实例将被复用，导致生命周期不会再被调用。如：当从/user/a导航到/user/b时，相同的组件实例将被复用。
因为2个路由都渲染同个组件，比起销毁再创建，复用显得更高效。但也意味着生命周期钩子不会被调用 。

该项目中点击header分类时，只进行了路由参数切换，但不会发生跳转。原因是进行了组件实例复用，没有调用生命周期钩子，故不跳转。

解决思路：

1. 让组件实例不复用，强制销毁重建，易浪费。使用:key="$route.fullPath"，为key添加完整路径
   此操作会导致整个页面重新加载所有数据，但banner所有分类页都一样，不需要重新加载，会造成资源浪费。

//Layout/index.vue
<template>
  <LayoutFixed />
  <LayoutNav />
  <LayoutHeader />
  <!-- 二级路由出口，如分类页 -->
   <!-- 添加key 破坏复用机制 强制销毁重建 -->
  <RouterView :key="$route.fullPath" />
  <LayoutFooter />
</template>

2. 监听路由变化，变化之后执行数据更新操作。可以减少网络请求，精细化处理路由跳转后的数据加 载
   在路由更新之前执行
   //路由一变化就监听到
   onBeforeRouteUpdate()
   以下操作只更新category数据而不更新banner数据

//useCategory.js
//默认参数为route.params.id
const getcategoryData = async (id = route.params.id) => {
  const res = await getCategoryAPI(id) //route.params.id：因为路由用占位符（params传参），所以用route.params.id获取当前路由id
  categoryData.value = res.result
  console.log("res", res)
}

onMounted(() => {
  getcategoryData()
})

//目标:路由参数变化时，可以把分类数据接口重新发送getcategoryData
//to:目标路由对象
onBeforeRouteUpdate((to) => {
  console.log('路由变化了')
  //使用最新的路由参数请求最新的分类数据
  getcategoryData(to.params.id)
})

Donate