当前位置：首页 > news >正文

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

news 来源：原创 2025/6/5 21:06:26

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

对于三级菜单（或多级嵌套路由），vue 都是通过 keep-alive 组件来实现路由组件的缓存。

有时候三级或者多级路由时，会出现失效情况。以下是三级菜单缓存的例子。

最后会有惊喜！

1.配置嵌套路由

在 vue-router 中，嵌套路由需要正确配置 children 属性，并且每个路由组件都需要有唯一的 name，很重要。很重要。很重要。。

const routes = [
  {
    path: '/',
    component: Layout, // 布局组件
    children: [
      {
        path: '/menu1/path/',
        component: Menu1, // 一级菜单
        children: [
          {
            path: '/submenu1/path',
            component: SubMenu1, // 二级菜单
            children: [
              {
                path: 'item1',
                component: Item1, // 三级菜单
                name: 'Item1', // 确保每个组件有唯一的 name
                meta: {
                   noCache: false,   //自定义参数，是否缓存
                }
              },
              {
                path: 'item2',
                component: Item2,
                name: 'Item2',
                meta: {
                   noCache: false,
                }
              },
            ],
          },
        ],
      },
    ],
  },
];

2. 在嵌套路由中使用 router-view

在每一级菜单的组件中，都需要使用 router-view 来渲染子路由，记住是每一级

Menu1.vue

<template>
  <div>
    <h2>Menu 1</h2>
     <keep-alive>
         <router-view></router-view> <!-- 渲染二级菜单 -->
     </keep-alive>
  </div>
</template>

SubMenu1

<template>
  <div>
    <h3>SubMenu 1</h3>
    <keep-alive>
       <router-view></router-view> <!-- 渲染三级菜单 -->
    </keep-alive>
  </div>
</template>

3. 使用 keep-alive 缓存嵌套路由

在顶级组件（如 Layout.vue）中，用包裹，确保所有嵌套路由组件都能被缓存。
如果只想缓存特定的嵌套路由组件，可以通过 include 或 exclude 属性来实现。

Layout.vue

<template>
  <div>
    <nav>
      <!-- 菜单导航 -->
      <router-link to="/menu1/submenu1/item1">Item 1</router-link>
      <router-link to="/menu1/submenu1/item2">Item 2</router-link>
    </nav>

    <!-- 使用 keep-alive 缓存所有嵌套路由 -->
    <keep-alive :include="cachedViews"  :exclude="notCacheName">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "clientManager",
  computed: {
    cachedViews() {
      return [...this.$store.state.tagsView.cachedViews];
    },
    key() {
      return this.$route.path;
    },
    notCacheName() {
      return [
        this.$route.meta && this.$route.meta.noCache ? this.$route.name : "",
      ];
    },
  },
};
</script>

此处有疑问点：

我查到的文档，基本上都是说在 顶级组件 Layout.vue 里面配置 keep-alive即可，下级的不用配置。

但是经过我测试，发现每一级都要配置 keep-alive，请看第二步。不配置的话，缓存就是不起作用。不知道为啥？

我是配置了每一级的，然后就可以了。此次请大家帮我解一下疑惑，万分感谢！

4. 最后的页面

<template>
  <div>
    <h4>Item 1</h4>
    <p>This is Item 1.</p>
  </div>
</template>

<script>
export default {
  name: 'Item1',
  activated() {
    console.log('Item1 被激活');
  },
  deactivated() {
    console.log('Item1 被停用');
  },
};
</script>