博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于从下一页返回不要回到当前页的解决办法
阅读量:6895 次
发布时间:2019-06-27

本文共 1519 字,大约阅读时间需要 5 分钟。

描述一下业务场景:

当前页面是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路径后面有参数也没有关系。

快去试试吧~

 

 

 

 

 

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

你可能感兴趣的文章
在IDEA中实战Git
查看>>
.Net文档图像处理工具包GdPicture.NET发布v14,提供最先进的PDF和文档成像技术
查看>>
网络地址转换NAT原理及应用
查看>>
返回json对象
查看>>
什么是Docker Volume?
查看>>
将文本文件转为html文件
查看>>
margin合并
查看>>
java学习思维导图
查看>>
数组取别名
查看>>
SQL--Advanced tutorials
查看>>
SaltStack源码分析之file状态模块
查看>>
Jetty锁定文件的问题
查看>>
[转] 中国人不可不知道的知识
查看>>
MongoDB分布式文件存储数据库视频教程Ⅰ
查看>>
开机自启pm2
查看>>
NT环境下进程隐藏的实现
查看>>
SQL中 inner join、 left join 、right join、 outer join之间的区别
查看>>
微软TMG 2010工作组环境独立服务器阵列配置-1
查看>>
1080P、720P、4CIF、CIF所需要的理论带宽【转】
查看>>
Excel批量取消超链接
查看>>