Vue Router 中 Keep-Alive 缓存路由嵌套场景的疑难解答

2023-11-17 01:06:47

前言

在 Vue.js 应用中，keep-alive 指令可用于缓存组件状态，从而提高性能。然而，在使用 keep-alive 缓存多级嵌套路由时，有时会出现无法缓存的问题，导致页面无法按预期重新加载。本文将探讨此问题的原因并提供一个有效的解决方案。

问题根源

在多级嵌套路由中，当父路由使用 keep-alive 缓存时，子路由也会被自动缓存。但是，如果子路由中包含了动态内容，例如从服务器获取的数据，那么在删除子路由后，父路由中的缓存状态仍旧会存在，导致动态内容无法重新加载。

解决方案

要解决此问题，我们需要确保在删除子路由时，父路由中的缓存状态也能被清除。为此，我们可以使用 include 和 exclude 选项来指定需要缓存和不缓存的路由：

// 在父路由中使用 keep-alive 指令
<keep-alive include="风控报告,风控规则查询">

// 在子路由中使用 exclude 指令
<router-view exclude="风控报告,风控规则查询"></router-view>

这样一来，当删除 风控报告 或 风控规则查询 子路由时，父路由中的缓存状态也会被清除，从而解决了动态内容无法重新加载的问题。

示例

以下是一个示例代码片段，展示了如何使用 include 和 exclude 选项来缓存嵌套路由：

const router = new VueRouter({
  routes: [
    {
      path: '/风控管理',
      component: Blank,
      children: [
        {
          path: '风控报告',
          component: Report,
          meta: { keepAlive: true } // 缓存此路由
        },
        {
          path: '风控规则查询',
          component: Query,
          meta: { keepAlive: true } // 缓存此路由
        }
      ]
    }
  ]
});