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

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', // 确保每个组件有唯一的 namemeta: {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>

菜单缓存失败的原因

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

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