beforeRouteLeave指定返回键的路由

1、问题

有3个页面:A、B、C
大致跳转顺序是这样:
在这里插入图片描述
1、2、3、4是正常的按钮进行的路由跳转,紫色的线表示浏览器或者手机的返回键。现在我要实现的是在B按返回键会返回A,而实际上却返回了C。

到B页面的整个过程在路由栈中大致是这样的:
A---B---C---B ,此时按返回键铁定是返回C了,那么这种情况有两种解决办法:

2、第一种

在页面C中跳转时,就直接返回,而不是push一个路由。

this.$router.back(-1);

那此时的路由栈就只有:A---B
此时在B中点击返回,也就直接回退到A了。

3、第二种

在C页面依旧push:

 this.$router.push({path:'/B'});

而在B页面加入:beforeRouteLeave,或者直接在router/index.js中B页面的路由配置内加上也行。
例外一个beforeRouteEnter用法也差不多,只是作用在进入该页面时,比created执行要早。

每个守卫方法接收三个参数:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。

let fromURL = "";
export default {
	fromURL,//定义一个全局变量,存储上一个URL
	
	data(){……}beforeRouteEnter (to, from, next) {
		//进入该页面时,记录上一个URL
		fromURL = from.name;
		console.log(from.name);  //C
		next();
	},
	
	beforeRouteLeave(to, from, next) {
		console.log('此时的路由栈:' + history.length);
		if (fromURL == 'C' && to.name == 'C') {
		       next('A');          //当按返回键是C--B--C 情形时,直接跳转至A
		} else {
		   	next();            //默认跳转
		}
	},
	    
	methods:{……}}

如果不考虑之前的URL,直接beforeRouteLeave(to, from, next) { to.name == 'C' ... },这样会导致B–C普通跳转也失败。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值