[vue vue-router]解决路由缓存问题

什么是路由缓存问题

vue官方给出的解释是，为了复用更加高效，使用带有参数的路由会被重复使用，而不会被销毁再创建。这样固然更加高效，但是意味着生命周期钩子函数不会被调用。

这就意味着，写到setup，onMounted钩子里的数据更新函数不会被调用而导致数据无法更新

解决问题的思路

让组件实例不再复用，强制销毁重建

为router-view添加key

以当前的路由完整路径为key值，给router-view组件绑定

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

 这个key可以结合v-for的key理解

使用beforeRouteUpdate导航钩子

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

// to参数:路由信息
onBeforeRouteUpdate((to) => {
  getCategoryList(to.params.id)
})

打印to参数:

这样我们就可以更加精确的控制更新的时机和更新的内容了。