vue中keep-alive页面数据缓存

在在做商城退换货的项目开发过程中,当用户提交退换货申请信息后进入下一步确认页面,这时候用户需要返回上一步进行信息的修改,由于vue返回上一页的时候,默认都会重新执行生命周期,重新加载数据,为了更好的体验,要让上一页的数据存在。这时候我们可以采用keep-alive 的方法。
我们需要考虑两点:一是哪个页面需要缓存数据;二是是否第一次进入这个页面。
1、缓存部分页面,可以在路由中设置一个参数控制
	// app.vue
	
	
	// router/index.js
	{
	  path: '/fillReturn',
	  name: 'fillReturn',
	  meta: {
	    keepAlive: true, //该字段表示该页面需要缓存
	    isBack: false, //判断是否是返回
	    title: '退换货'
	  }
	}
2、使用keep-alive的时候,只会触发activated和deactivated 这两个生命周期
	

你可能感兴趣的:(vue)