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

<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
			}
		}
	]
})

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值