NEWS LETTER

keep-alive 与 router-view

  • Home
  • vue_keep_alive
Scroll down

keep-alive 用于缓存不活动的组件实例,router-view 一个 functional 组件,渲染路径匹配到的视图组件。这里对两者结合使用时遇到几种情况做个简单记录

keep-alive

属性:

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

缓存组件名为 a,b 的组件,排除组成名为 c 的

1
2
3
<keep-alive :include="['a','b']" :exclude="['c']" :max="5">
<component :is="view"></component>
</keep-alive>

结合router-view使用

如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存

1
2
3
<keep-alive>
<router-view></router-view>
</keep-alive>

然后实现总是会有其他不同的需求的

  • 比如只缓存某些组件
  • 或者相同路由不同参数需要分开缓存

缓存部分组件

指定只缓存部分组件,相对来说比较简单。 可以在 router.meta 中增加需要缓存标识,然后使用
include 指定需要缓存组件

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
38
39
40
41
42
<template>
<keep-alive :include="include">
<router-view />
</keep-alive>
</template>

<script>
export default {
data() {
return {
include: []
}
},
watch: {
$route(route) {
let { meta } = route
if (meta.cache && !this.include.includes(meta.name)) {
this.include.push(meta.name)
}
}
}
}
</script>

// route 路由数组
[{
path: 'home',
name: "home",
meta:{
name:'组件名称',
cache:true //设置需要缓存
},
component: () => import('@/views/home')
},{
path: '/login',
name: 'login',
meta:{
name:'组件名称',
cache:true
},
component: () => import('@/views/login'),
}]

这种方式需要知道组件的 name,当项目较大时候,给路由匹配上对应组件 name 也是件挺繁琐的事。改进一下使用两个 router-view 组件,一个用 keep-alive 包裹进行缓存,一个不缓存。这样就不需要例举出需要被缓存组件名称

1
2
3
4
5
6
7
<template>
<keep-alive>
<router-view v-if="$route.meta.cache" />
</keep-alive>
</template>

<router-view v-if="!$route.meta.cache" />

相同路由不同参数

当有一个路由为 /params/:id ,打开 /params/1、/params/2 、/params/xxx 正常情况下 vue 会对其进行复用,但是有些时候我们需要对其分开缓存。 这个时候可以给 router-view 指定 key

1
2
3
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>

$route.fullPath : 完成解析后的 URL,包含查询参数和 hash 的完整路径。所以每个路径都是唯一的,当然也可以指定其他的值,只需要保持唯一就可以了

我很可爱,请给我钱

其他文章
cover
Flutter 常用小部件(一)
  • 21/01/08
  • 22:23
  • 记录类
cover
one-wallhaven 壁纸程序
  • 20/11/06
  • 18:37
  • 创作类
目录导航 置顶
  1. 1. keep-alive
  2. 2. 结合router-view使用
    1. 2.1. 缓存部分组件
    2. 2.2. 相同路由不同参数
请输入关键词进行搜索