vue缓存路由时如何判断当前页面时返回的页面还是push的页面

问题: 在 vue 项目中,使用了 keep-alive 后,可以缓存组件。但在实际使用中,会经常出现一个场景,那就是 列表-详情 的页面,从列表跳转到详情页后,再返回列表页时,我们就会期望列表页是缓存了的;但是如果是切换到其他列表页后再返回该列表页,我们就期望它重新获取数据;

方法: 要解决这个问题,我们需要用一个标识符来判断当前页面到底是从详情页返回的还是重新进入的;这里我使用的是在路由里面的 meta 增加一个属性来控制,代码如下:

const routes = [
	{
		name: 'xxx',
		path: 'xxxx',
		component: component,
		meta: {
			keepAlive: true,
			isPush: true       // 用于标识是否为push进入该页面
		}
	}
]

我们在这里定义了 isPush 属性来控制,这里我们的思路是默认都是push进来的,去详情页时就将其设置为false,然后在activated里面判断如果该值为 true 就重新刷新一下,为false就将该值重新变为true。代码如下:

// 去详情页面的方法
goDetail(){
	this.$route.meta.isPush = false;
	this.$router.push('detail');
},

// 再次激活的钩子
acitvated(){
	// 如果isPush为true,证明不是详情页返回的,否则就是从详情页返回的
	if(this.$route.meta.isPush){
		// 重置这个页面的信息
		this.resetTable()
	}else{
		// 重置isPush的状态
		this.$route.meta.isPush = true;
	}
}

这样,就分辨出了这个页面activated时到底是从详情页返回的还是从其他页面进入的。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值