温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

记 history.replaceState方法一次应用 解决单页面应用刷新切换页面问题

发布时间:2020-07-01 15:40:14 来源:网络 阅读:1100 作者:蠢蠢的蜗牛 栏目:web开发

恩,以前就知道history api 新加了几个方法但是没怎么研究过,今天碰到了一个小问题,用history完美解决了,很兴奋,记录下

首先说下我遇到的问题场景:

现在有两个页面 A,B

A页面时提交信息页面 B页面是结果页

并且 A,B 页面是同一个html文件内用 js 模板 动态渲染的,

那么当结果页面动态渲染出来以后,每次刷新就会显示A页面,其实,我更想显示B页面对吧,肯定不想让用户再次提交一次,而且大多数情况下我其实并不希望用户直接进入提交信息页面的,因为如果是支付的话,会造成二次支付,

而且在逻辑上也是有错误的,我在A页面刷新,你还应该让我在A页面才对,为什么显示B页面????

那么这个时候就是replaceState大显身手的时候了。


                var stateObject = { result: true }; //可以传递参数
                var title = "Wow Title";
                var newUrl = location.href;
                history.replaceState(stateObject, '', newUrl);
                console.info('history', history);

中间的title 传空,因为现在大多数浏览器都选择忽略了它== ,
stateObject 是传递的参数

可以用 history.state直接获取到

那么这样事情就变得简单了,在渲染B页面的时候替换掉A页面的连接,其实这个例子中只是传递了一个result参数,那么当页面刷新的时候只要检测到result 这个参数为true 即直接显示结果页。而且当用户点击浏览器回退按钮的时候也不会再返回到A页面,避免再次提交。

也许vue react 单页面应用也可以用这种方式来实现,先记个引子,有时间可以尝试下。

可能这个例子比较抽象,有时间整个完整的demo

附上 history api 官网说明地址吧

https://developer.mozilla.org/zh-CN/docs/Web/API/History

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI