VUE缓存页面,通过keep-alive或变量的方式实现

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

VUE缓存页面,通过keep-alive或变量的方式实现

用例

当前有三个页面:检索页、详情页与其他
页面结构如图:
在这里插入图片描述
左侧导航有筛选页和其他两个页面,筛选页筛选后内含详情页可跳转,通过详情页可返回至筛选页,或通过切换左侧导航标签,进入筛选页或详情页。

需求:点击筛选页进入筛选页,进入详情页时保留筛选数据,从详情页返回时离开时的筛选数据仍渲染在页面上。而从其他入口切换至筛选页则不保留筛选数据。

实现方式

1.keep-alive
2. keep-alive结合meta实现
3.通过变量控制

keep-alive

首先,我们从简单的需求说起,即无论从哪个页面切入都需缓存筛选页。
那么此时使用keep-alive是比较合适的。
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。

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

当组件被包裹在keep-alive中时,组件的状态会被保留。除了保留筛选数据可以用到,还可以保留浏览位置等。但是需要注意的是:keep-alive会把所有加载过的界面都缓存起来,在返回时无法将界面销毁掉,导致再进入时没有重新加载这个界面。可以在点击返回按钮的时候(使用beforeRouteLeave)调用this.$destroy(true)将界面销毁。

keep-alive与meta

通过meta设置变量分情况缓存页面。
1.在路由中配置meta:

{
	path: '/test/filter',
	name: 'filter',
	component: filter,
	meta: {
		keepAlive: true    //此组件需要缓存
	},
	path: '/test/other,
	name: 'other',
	component: other,
	meta: {
		keepAlive: false    //此组件不需要缓存
	},
	path: '/test/detail,
	name: 'detail',
	component: detail,
	meta: {
		keepAlive: false    //此组件不需要缓存
	}
}

2.分情况包裹keep-alive

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

3.在筛选页通过beforeRouteEnter

  beforeRouteLeave (to, from, next) {
    if (to.name === detail' && from.name === 'filter') {
      from.meta.keepAlive = true
    } else if (to.name !== detail' && from.name === 'filter') {
      from.meta.keepAlive = false
    }
    next()
  }

通过变量控制

思路是,设置一个初始值为false的变量(本例中为clear),在组件中通过watch监听clear的变化,当clear为true时,清除缓存。

<script>
	export default{
		data(){
			return{
				clear: false
			}
		},
		beforeRouteLeave (to, from, next) {
			if(to.name !== 'detail') {
				this.clear = true
				setTimeout(()=>{
					this.clear = false
				})
			}else{
				this.clear = false
			}
			next()    // 不要忘记写next()
		},
		watch: {
			clear(newVal, oldVal){
				if(newVal){
					// to do 清除缓存数据
				}
			}
		},
	}
</script>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

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

抵扣说明:

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

余额充值