响应路由参数的变化
使用带有参数的路由时，当用户从/users/tom导航到/users/bob时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新
routes: [{
path: '/',
component: Layout,
children: [{
path: '',
component: Home
}, {
path: '/category/:id',
component: Category
}]
}]
路由缓存问题.gif
如上图动画显示：路由变化了，但是页面还有缓存，数据未变化，需要手动刷新一下页面数据才会变化。
解决上面路由缓存问题的思路：
- 让组件实例不复用，强制销毁重建
- 监听路由变化，变化之后执行数据更新操作
方案一：给 router-view 添加 key
以当前路由完整路径为key的值，给router-view组件绑定
<RouterView :key="$route.fullpath">
最常见的用例是v-for结合：
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
也可用于强制替换一个元素或组件而不是复用它。当你想这么做时他可能会很有用：
- 在适当的时候触发组件的生命周期钩子
-
触发过渡
添加key.gif
如上图，但是这样在我们上面的项目中会造成banner接口重复调用问题，造成资源浪费
方案二：使用beforeRouteUpdate导航钩子
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可
或者，使用beforeRouteUpdate，它也可取消导航：
const User={
template: '...',
async beforeRouteUpdate(to, from) {
// 对路由变化做出响应
this.userData = await fetchUser(to.params.id)
}
}
在项目中修改：
import { onBeforeRouteUpdate } from "vue-router";
// 目标:路由参数变化的时候，可以把分类数据接口重新发送
onBeforeRouteUpdate((to) => {
console.log(to);
getCategoryAPI(to.params.id)
});
onBeforeRouteUpdate.gif
如上图： 发现banner接口没有存在多余请求了
总结
- 路由缓存问题产生的原因是什么？
答：路由只有参数变化时，会复用组件实例
- 两种方案都可以解决路由缓存问题，如何选择呢？
答：在意性能问题，选择 onBeforeRouteUpdate，精细化控制
不在意性能问题，选择添加 key，简单粗暴
