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

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

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

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

最后会有惊喜!

1.配置嵌套路由

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

js 复制代码
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

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

SubMenu1

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

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

在顶级组件(如 Layout.vue)中,用 包裹 ,确保所有嵌套路由组件都能被缓存。

如果只想缓存特定的嵌套路由组件,可以通过 includeexclude 属性来实现。

Layout.vue

html 复制代码
<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. 最后的页面

html 复制代码
<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>

菜单缓存失败的原因

  • 路由配置不正确,导致组件被重复渲染。
  • 组件没有唯一的 name。
  • 嵌套路由的 没有正确渲染
  • 确认页面的 name 是否和 路由配置定义页面的 name 是否相同,不同肯定失败

最易出错的是最后一点,请仔细检查。

相关推荐
mCell20 小时前
ECharts 万字入门指南
前端·echarts·数据可视化
X01动力装甲20 小时前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
Dontla21 小时前
Edge浏览器CSDN文章编辑时一按shift就乱了(Edge shift键)欧路翻译问题(按Shift翻译鼠标所在段落)
前端·edge
lggirls21 小时前
私有证书不被edge浏览器认可的问题的解决-Debian13环境下
前端·edge
野木香1 天前
tdengine笔记
开发语言·前端·javascript
Cosolar1 天前
Coze-JS WsChatClient 实时语音对话源码解析
前端
郝学胜-神的一滴1 天前
享元模式(Flyweight Pattern)
开发语言·前端·c++·设计模式·软件工程·享元模式
zheshiyangyang1 天前
Sass开发【四】
前端·css·sass
讨厌吃蛋黄酥1 天前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
GISer_Jing1 天前
作业帮前端面试(准备)
前端·面试·职场和发展