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 是否相同,不同肯定失败

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

相关推荐
伍哥的传说25 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783827 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊38 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为