vue缓存页面之keepAlive的使用

vue 专栏收录该内容
38 篇文章 0 订阅

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

    <div id="app">
        <keep-alive>
			<router-view v-if="$route.meta.keepAlive" />
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive" />
    </div>

2、第二步:在路由meta中设置keepAlive,这里为什么设置isBack后面会说
在这里插入图片描述
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 调用评论列表而不会影响整个页面缓存

  • 3
    点赞
  • 0
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值