Vue——使用内置组件Keep-alive

1. 在app.vue中加入组件

//Vue2
<keep-alive>
  <router-view/>
</keep-alive>
//Vue3
<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
	</keep-alive>
</router-view>
1
2
3
4
5
6
7
8
9
10

2. keep-alive 属性

3. 例子

• include、exclude

exclude与include参数类型一致

//string 多个用逗号分割
<keep-alive include="a,b,c">
//RegExp 正则匹配
<keep-alive :include="/a|b|c/">
//Array
<keep-alive :include="['a','b','c']">
1
2
3
4
5
6

• max

<keep-alive max="5">
1

Tip 组件名必须与include、exclude配置的名字一致