Vue 路由缓存 产生的原因 及 解决方案

路由缓存产生的原因

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

  • 在 Vue3 中，我们是在 onMounted 钩子中发起异步请求，获取数据的，当有路由缓存问题时，onMounted 钩子不会执行，也就无法拿到最新的数据；

• 当路由的 path 一样，参数不同的时候，会选择直接复用路由对应的组件；

  • 也就意味着该组件中的钩子函数就不会触发；

• eg：

  • category/1005002 与 category/1010000 这两个路由；

解决方案

• 1️⃣：给 routerView 添加 唯一的 key 属性，强制破坏缓存；

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

• 2️⃣：使用 onBeforeRouterUpdate钩子函数，做精确更新；
  • onBeforeRouterUpdate 钩子函数可以在每次 路由更新之前 执行，在 回调中执行 需要 数据更新 的 业务逻辑 即可；

  import { onBeforeRouteUpdate } from 'vue-router';
  onBeforeRouteUpdate((to) => {
      // 数据更新的相关业务逻辑
  });
  

两种方案的选择

• 在意性能问题，选择 onBeforeRouteUpdate ，精细化控制；
• 不在意性能问题，选择 key，简单粗暴；