扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
恩，以前就知道history api 新加了几个方法但是没怎么研究过，今天碰到了一个小问题，用history完美解决了，很兴奋，记录下
创新互联于2013年创立，是专业互联网技术服务公司，拥有项目成都网站制作、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元瑶海做网站,已为上家服务,为瑶海各地企业和个人服务,联系电话:028-86922220
首先说下我遇到的问题场景：
现在有两个页面 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
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网