路由缓存处理

缓存问题：当路由path一样，参数不同的时候会选择直接复用路由对应的组件，即点击了菜单，但是复用了组件，页面没有发生更新

产生原因：路由只有参数变化时，会复用组件实例，导致数据回不来，无法更新

解决方案：

1、给 routerv-view 添加key属性，破坏缓存。这种方法简单粗暴

<!-- 路由出口  添加key  破坏复用机制  强制销毁重建 -->

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

 

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

import { onBeforeRouteUpdate } from 'vue-router'
import { ref, onMounted } from "vue";
import { getCategoryAPI } from "@/apis/category";

// 获取数据
const categoryData = ref({});
const route = useRoute();
const getCategory = async (id = route.params.id) => {
  const res = await getCategoryAPI(id);
  categoryData.value = res.result;
};
// 页面挂载
onMounted(() => {
  getCategory();
});

// 目标：路由参数变化的时候，可以把分类数据接口重新发送
onBeforeRouteUpdate((to) => {
  console.log("路由变化了");
  // 存在问题：使用最新的路由参数请求最新的分类数据
  console.log(to);
  getCategory(to.params.id);
});