新版的Vue-Router动态添加路由主要的两个坑点： 在静态路由中增加404页面，会导致从动态路由进入时会渲染404页面组件的内容 在动态添加路由的最后再添加404页面，会触发vue-router报警问题
# 注意事项
- keepAlive 多个
router-view无关，需要找到页面路由使用的那个出口 - keep-alive :include="cachedComponents" 使用的 name 与 routerlist 定义的路由文件无关，是组件中的 name 命名，而不是路由中的组件 name 命名 include/exclude 值的多种形式
- 多级嵌套的路由其父级
meta也要添加keepAlive: true// 标记此路由需要缓存，本身meta也要加
PS: 亲测父级没加也可以生效
# 简单代码示例 Vue3
routerlist.js
{
path: "/groupsManage",
component: Layout,
meta: {
title: "团队管理",
keepAlive: true // 标记此路由需要缓存
},
redirect: "/groupsManage/performance",
children: [
{
path: "/groupsManage/messages",
name: "groupsManageMessages",
component: () => import("@/views/groupsManage/messages/index.vue"),
meta: {
title: "消息管理",
keepAlive: true // 标记此路由需要缓存
}
},
{
path: "/messages/msgDetail",
name: "msgDetail",
component: () => import("@/views/groupsManage/messages/msgDetail.vue"),
meta: {
title: "系统通知详情",
isShow: false
}
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Layout
<router-view v-slot="{ Component, route }">
<keep-alive :include="cachedComponents">
<component :is="Component" v-if="route.meta.keepAlive" :key="route.path" />
</keep-alive>
<transition name="fade" mode="out-in">
<component :is="Component" v-if="!route?.meta?.keepAlive" :key="route.path" />
</transition>
</router-view>
const cachedComponents = ref(["GroupsManageMessages"])
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
groupsManage/messages/index.vue
添加vue2的写法，也可以用其他方案
<script>
export default {
name: "GroupsManageMessages"
}
</script>
onActivated(() => {
console.log("onononononononononononononon")
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 补充： include/exclude 值的多种形式。
// 1. 将缓存 name 为 test 的组件(基本）
<keep-alive include='test'>
<router-view/>
</keep-alive>
// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
<keep-alive include='a,b'>
<router-view/>
</keep-alive>
// 3. 使用正则表达式，需使用 v-bind
<keep-alive :include='/a|b/'>
<router-view/>
</keep-alive>
// 4.动态判断
<keep-alive :include='includedComponents'>
<router-view/>
</keep-alive>
// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'>
<router-view/>
</keep-alive>
// 6. 和 `<transition>` 一起使用
<transition>
<keep-alive>
<router-view/>
</keep-alive>
</transition>
// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37