解决路由缓存问题 vue3

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

> 现存问题：由于路由的组件复用机制，当路由的路径path没有发生变化时，路由对应的组件会被直接复用，也就是生命周期钩子函数不再执行，请求也就不会再次发起
> 解决思路：给`router-view` 加上key 值为每次路由切换的完整路径

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

---

三种可选方案

1）给`router-view` 添加key属性 ----------- `Layout/index.vue`

      说明❓：组件会被重新创建

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

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

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

3）使用`onBeforeRouteUpdate` 钩子函数（不会重新创建组件） 

+ import { onBeforeRouteUpdate } from 'vue-router'

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

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