vue缓存页面之keepAlive的使用

要实现的功能是,在列表进入详情页后,返回列表页时,列表页不刷新,但是从其他导航页面进入列表页要刷新。
1、第一步:在app.vue使用keepalive

    

2、第二步:在路由meta中设置keepAlive,这里为什么设置isBack后面会说
vue缓存页面之keepAlive的使用_第1张图片
3、第三步:在需要缓存的页面加入下面的代码,事实上,当我们加入keep-alive标签后,meta中keepAlive为true的路由页面数据会在首次访问后将数据缓存到本地的sessionStorage中,我们可以通过加入isBack来判断是否请求新的数据。

       beforeRouteEnter(to, from, next) {
			if (from.name == 'travelnotesdetail') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			if (this.$route.meta.isBack) {
				// 如果isBack是true,表明不需要获取新数据,直接使用缓存的数据    
				let formDataStorage = JSON.parse(sessionStorage.getItem('notes'));
				this.notes = formDataStorage;
				this.$route.meta.isBack = false;
			}else{
				this.getNotes();
				
			}
		},
		methods:{

beforeRouteEnter会在页面跳转之前执行。

值得注意的是

正常页面的生命周期: beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive后
首次进入缓存页面:beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面:beforeRouteEnter -->activated --> deactivated

也就是说,使用keep-alive后会多出一个activated ,当页面被缓存时,这个东西非常有用。比如,在详情页中发表了评论,有这个东西,就能在返回列表时通过activated 调用评论列表而不会影响整个页面缓存

你可能感兴趣的:(vue)