什么是路由缓存问题？

响应路由参数的变化

使用带有参数的路由时，当用户从/users/tom导航到/users/bob时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新

routes: [{
        path: '/',
        component: Layout,
        children: [{
            path: '',
            component: Home
        }, {
            path: '/category/:id',
            component: Category
        }]
    }]

路由缓存问题.gif

如上图动画显示：路由变化了，但是页面还有缓存，数据未变化，需要手动刷新一下页面数据才会变化。

解决上面路由缓存问题的思路：

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

方案一：给 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接口没有存在多余请求了

总结

1. 路由缓存问题产生的原因是什么？
   答：路由只有参数变化时，会复用组件实例

2. 两种方案都可以解决路由缓存问题，如何选择呢？
   答：在意性能问题，选择 onBeforeRouteUpdate，精细化控制
   不在意性能问题，选择添加 key，简单粗暴