当前位置: 移动技术网 > IT编程>脚本编程>vue.js > Vue keep-alive 缓存组件的三种方式

Vue keep-alive 缓存组件的三种方式

2020年07月22日  | 移动技术网IT编程  | 我要评论
<keep-alive><component>// ....</component></keep-alive>所有路由匹配到的组件都会被缓存<keep-alive include="a"><component>// ....</component></keep-alive>仅匹配到的组件(如:组件 a)会被缓存(仅想要缓存的组件得到缓存)可以通过配置 exclude 匹

<keep-alive> 所包裹的不活动组件,将被缓存,而不是销毁。

1. 直接包裹在里面的组件和所有路由匹配到的组件都会被缓存

<keep-alive>
	<component>
		// ....
	</component>
	
	<router-view />
</keep-alive>

2. 使用 include 属性和 exclude 属性对组件缓存进行筛选

<keep-alive include="a">
	<component>
		// ....
	</component>
</keep-alive>

仅匹配到的组件(如:组件 a name = "a")会被缓存(仅想要缓存的组件得到缓存)
可以通过配置 exclude 匹配不想要缓存的组件,此外的其他组件都得到缓存

这种情况需要知道组件名称

3. 动态配置路由来确定哪些组件需要缓存

var router = new Router({
	routes: [
		{
			path: '/...',
			component: ...,
			meta: {
				keepAlive: true  // or false
			}
		}
	]
})

不需要例举想要缓存的组件名称

本文地址:https://blog.csdn.net/Kofe_Chen/article/details/107379525

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网