博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
7.[数据结构和算法分析笔记]词典 Dictionary
查看>>
CCNP精粹系列之八----帧中继全网拓扑试验配置
查看>>
Lync升级S4B秘籍,So Easy!!!
查看>>
SpringBoot整合mybatis、shiro、redis实现基于数据库的细粒度动态权限管理系统实例...
查看>>
android用户界面-组件Widget-进度条ProgressBar
查看>>
猜字谜小游戏编程
查看>>
【OneNote Mobile】 如何处理便签内容的格式?
查看>>
Algeco Scotsman将召开2016年第三季度业绩电话会议
查看>>
新加坡IMDA计划进行Li-Fi测试
查看>>
《深入理解大数据:大数据处理与编程实践》一一1.3 MapReduce并行计算技术简介...
查看>>
LoadRunner关联的高级应用
查看>>
如何减少返工工作量?
查看>>
《敏捷可执行需求说明 Scrum提炼及实现技术》—— 2.1 界定不可更改的边界
查看>>
关注安防行业 聚焦公共安防系统
查看>>
Android代码(Handler的运用),HttpURLConnection的应用,将url图片地址转换成图片。...
查看>>
MySQL锁系列(七)之 锁算法详解
查看>>
webOS 更名 LuneOS,新版本名为 Affogato
查看>>
《UNIX环境高级编程(第3版)》——导读
查看>>
11_Eclipse中演示Git版本的创建,历史版本的修改,创建分支,合并历史版本和当前版本...
查看>>
《实施Cisco统一通信管理器(CIPT1)》一1.2 CUCM概述
查看>>