解决路由缓存问题

问题：当点击到不同的分类时，数据不会马上更新，需要刷新页面才能进行数据更新。

使用带有参数的路由时需要注意的是，当用户从/users/johnny导航到/users/jolyne时，只有后面带的参数id发生变化，相同的组

件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。

不过，这也意味着导致组件的生命周期钩子不会被调用。

路由缓存

解决问题的思路：

1.监听路由变化，变化之后执行数据更新操作（推荐）

beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可
const route = useRoute();
const categoryList = ref({});
const getCategory = async (id = route.params.id) => {
  const res = await getCategoryAPI(id);
  categoryList.value = res.result;
};
getCategory();

// 路由参数变化时，可以把分类数据接口重新发送
onBeforeRouteUpdate((to) => {
  getCategory(to.params.id);
});

2.给路由绑定key，让组件实例不复用，强制销毁重建

会导致大量的请求发送，导致资源浪费

  <!-- 添加key，破坏复用机制，强制销毁重建 -->
  <RouterView :key="$route.fullPath" />