路由缓存问题

使用带有参数的路由时需要注意：

 当用户从/users/info 跳转到 /user/jolyne 时，相同的组件实例将被重复使用，因为两个路由都渲染同个组件。比起销毁再创建，复用则显然能够更加高效，不够，这也意味着组件的生命周期钩子不会被调用。

解决问题思路：

1.  让组件实例不复用，强制销毁重新创建
2.  监听路由的变化，变化之后执行数据更新操作

方法一：给router-view 添加key属性

key 通常使用在v-for 里面，但是它也可以用于强制替换一个元素/组件而不是复用它，它可以起到：

1. 在适当时候触发组件的生命周期钩子
2. 触发过渡

第一种方式

强制重新渲染 但是可能会导致 接口重复发送导致浪费的问题

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

第二种方式

beforeRouteUpdate导航钩子

beforeRouteUpdate 钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

在需要监听到路由变化的页面

import { onBeforeRouteUpdate} from "vue-router";

// 如果路径没有内容，则通过当前路由进行获取id传参
const getCateGory=async (path=route.params.id)=>{
     const res=await getCategoryApi(path)
     categoryData.value=res.data.result
}

// 目标：路由参数变化的时候 可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=>{
     // 存在问题：需要使用最新的路由参数信息进行传参
     getCateGory(to.params.id)
})