Vue实现订单确认界面禁止浏览器返回操作导致重复提交订单的问题

哈喽大家好啊最近遇到一个问题，就是在提交订单成功后的页面，然后用户去浏览器返回，就导致又提交了一次

然后就想到了如果提交成功页面，就阻止浏览器返回操作

主要实现如下：

1.在mounted的钩子函数：

2.声明disableBrowserBack方法

3.在destoryed钩子函数清除掉监听事件

实现效果

扩展知识点：

1.history.length-- 属性保存着历史记录Url数量

history.back() - 等同于在浏览器点击后退按钮；

history.forward() - 等同于在浏览器中点击前进按钮；

history.go() - 加载 history 列表中的某个具体页面。

刚刚上面用到的是H5新增的属性事件

history.state-属性用来保存记录对象

history.pushState() - 向浏览器的历史记录中添加一个状态；

history.replaceState() - 修改当前历史记录实体；

popstate事件 - 当活动历史记录条目更改时，将触发

(1)history.state

返回当前页面的state对象

（2）history.pushState(state,title,url)

state:状态对象可以是任何可以序列化的对象

title: 当前大多数浏览器都忽略此参数，尽管将来可能会使用它。

url: 新历史记录条目的 URL 由此参数指定。如果未指定此参数，则将其设置为文档的当前 URL。

3.history.replaceState(state, title, url)

修改当前历史记录实体，如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。参数与 pushState 类似。

4.popstate事件

当活动历史记录条目更改时，将触发 popstate 事件。

需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在 Javascript 代码中调用 history.back() 或者 history.forward() 方法）。

不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发(emit ) popstate 事件，但 Firefox 则不会

参考原文：

(9条消息) vue里浏览器返回键如何禁用_vue禁用浏览器返回按钮_一晌贪欢i的博客-CSDN博客

Vue实现订单确认界面禁止浏览器返回操作导致重复提交订单的问题相关推荐

SpringBoot解决用户重复提交订单（方式一：通过唯一索引实现）
文章目录前言 1.方案实现 1.1.给数据库表增加唯一键约束 1.2.编写获取请求唯一ID的接口 1.3.业务提交的时候,检查唯一ID 2.小结前言对于投入运营的软件系统(商城.物流.工厂等), ...
禁止浏览器返回登入页面
目前很多项目都没有特意做这个处理,就是浏览器返回到登入页面,然后点击下一页箭头,可以进入,但是如果有这个需求只需要在禁止的那个页面,输入如下代码即可 <script>$(document) ...
移动端h5监听浏览器返回操作（目前在react项目中用到）
前言 1.主要是返回是默认的浏览器返回事件是返回上一个页面. 2.处理页面各种弹窗,点击物理返回应该隐藏这些弹窗而不是直接返回页面. 3.总结下问题,h5应该希望能监听到返回事件并且做一些处理. 相关 ...
js禁止浏览器后退操作
mounted() {//禁止浏览器的后退操作history.pushState(null, null, document.URL);window.addEventListener('popstate ...
监听浏览器的返回事件，禁止浏览器返回
//禁止页面后退 history.pushState(null,null,document.URL); window.addEventListener('popstate',function(){// ...
confirm多次点击确认，导致重复提交
if(isOK){ layer.confirm('确定要进行投诉?', {icon: 3, title:'投诉确认'}, function(index){ $("#userInfoComme ...
防止重复提交订单-（转）
防止重复提交 Button1.Attributes.Add("onclick", "this.value='正在提交中,请等待--';this.disabled=tr ...
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...

Vue实现订单确认界面禁止浏览器返回操作导致重复提交订单的问题

Vue实现订单确认界面禁止浏览器返回操作导致重复提交订单的问题相关推荐

最新文章

热门文章