解决路由缓存问题

解决路由缓存问题

任务目标: 解决路由复用数据不重新获取的问题

现存问题：由于路由的组件复用机制，当路由的路径path没有发生变化时，路由对应的组件会被直接复用，也就是生命周期钩子函数不再执行，请求也就不会再次发起

解决思路：给router-view 加上key 值为每次路由切换的完整路径

<router-view :key="$route.fullPath"></router-view>

三种可选方案

1. 给router-view 添加key属性

<router-view :key="$route.fullPath"/> 

2. 使用watch监听id变化重新拉取接口

watch(
  ()=>{ return route.params.id },
  ()=>{ loadCategoryList() } // 在id变化的时候重新使用最新的路由id拉取最新数据
)

3. 使用onBeforeRouteUpdate 钩子函数 （推荐）

async function loadCategoryList (id) {
  const res = await findTopCategory(id)
  categoryData.value = res.result
  breadName.value = res.result.name
}
onMounted(() => {
  loadCategoryList(route.params.id)
})
// 在路由跳转之后更新之前自动执行
// beforeEach((to,from,next)=>{})
onBeforeRouteUpdate((to) => {
  // to指代的是目标路由对象 to拿到最新的路由参数id
  // 使用最新id获取数据
  loadCategoryList(to.params.id)
})

根据不一样的场景要求使用不一样的技术方案，如果性能要求很高，第三种方案，如果不涉及性能问题，使用key简单粗暴，避免提前优化