描述一下业务场景:
当前页面是A页面,在A页面里面请求接口,根据接口的返回值去判断要跳转的页面,这样,在判断完状态值的时候跳到B页面,这是在B页面返回就会出现跳不出B页面的问题,因为B页面返回A页面的时候,又去判断A页面的返回状态,又跳回B页面,如此反复。。。。
在解决问题之前,先简单说一下我的解答思路:
1、我天真的以为,js会有那种API,可以删除掉A页面在 history的url,这样,在B页面返回自然返回不到A页面;
这个思路无疑是最简单的,不过真的是too young too simple,没有这种API
2、我也尝试了各种的pushState、replaceState的方法,不过绕来绕去也没有能解决问题,不过你可以尝试一下,我总是觉得冥冥之中可以解决。
pushState(其中的state、title建议不要为空)
window.history.pushState(state, title, url);
我们可以通过pushState现改变URL而不刷新页面
var state = ( {url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE} );window.history.pushState(state, ~title, ~href);
replaceState 同理
window.history.replaceState( state, ~title, ~href);
pushState、replaceState 的区别
pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。
3、就是现在解决问题的方法,大概思路是,在跳转B页面之前将A页面的url换成要跳转的B,这样当跳转到B页面的时候,history发现已经有了B路径,就不会去保存相同的路径。
现在来看一下Demo
A.html,在跳转之前,将当前页面的路径换成要跳转的页面路径,在跳到B页面之后,B页面的后退按钮是不可用的,因为他之前没有历史记录
这是A页面,跳到B页面
B.html,B页面同理跳到C页面,C页面同样不可以点击后退
这是B页面,跳到C页面
C.html,
这是C页面,回到A页面
此时,C页面并没有替换url,当跳到A.html时,A可以点击回退,好,我们继续
A.html继续点击跳到B.html,这时B.html返回就回到了C.html,很好理解,就是历史栈中只保存了当前的B.html和C.html。
这样是不是就完美的解决了我们的问题。
当然这是demo,不过返回工程里面,我们需要匹配当前的路径,并要替换成我们想要跳转的路由。
// 再次挑战 againInvitingClick () { let href = window.location.href; var replaceHref = href.replace('#/','#/selectGoods') location.replace(replaceHref); event.returnValue=false; this.$router.push({name:'selectGoods',query:{token:this.param_token}}); },
这样,即使url路径后面有参数也没有关系。
快去试试吧~