关于从下一页返回不要回到当前页的解决办法

描述一下业务场景：

当前页面是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 href="B.html"  
onclick="javascript:location.replace(this.href);
 event.returnValue=false;
 ">这是A页面，跳到B页面</a>

B.html，B页面同理跳到C页面，C页面同样不可以点击后退

<a href="C.html" 
onclick="javascript:location.replace(this.href);
 event.returnValue=false; 
">这是B页面，跳到C页面</a>

C.html，

<a href="A.html" >这是C页面，回到A页面</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路径后面有参数也没有关系。

快去试试吧~

 

 

 

 

 

转载于:https://my.oschina.net/wsxiao/blog/1615331