mounted () {

  // 禁用浏览器返回键

  history.pushState(null, null, document.URL);

  window.addEventListener('popstate', this.disableBrowserBack);

},

destroyed() {

  // 清除popstate事件 否则会影响到其他页面

  window.removeEventListener("popstate", this.disableBrowserBack, false);

},

methods: {

  disableBrowserBack() {

    history.pushState(null, null, document.URL);

  }

}

history的认识

history 对象包含浏览器历史。

常见属性/方法:

  • 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 则不会

vue禁用浏览器返回键的更多相关文章

  1. js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

    之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...

  2. HTML5 监听移动端浏览器返回键兼容版本

    // 往windosw对象中的历史记录注入URL的方法 function addUrl() { var state = { title: "title", url: "# ...

  3. 监听浏览器返回键、后退、上一页事件(popstate)操作返回键

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

  4. 【React Native】某个页面禁用物理返回键

    1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...

  5. vue禁用浏览器回退

    解决方案 mounted() { history.pushState(null, null, document.URL) window.addEventListener('popstate', () ...

  6. vue 手机物理返回键关闭弹框

    1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...

  7. 解决IOS微信内置浏览器返回后不执行js脚本的问题

    在A页面写一个$(function(){}) 后随便点击一个URL跳转到B页面 利用微信内置浏览器 返回键返回到A页面后发现这段JS不执行,后来找到了解决方案 $(function () { var ...

  8. mui 监听 手机 物理返回键

    mui.back = function(){ return  //禁用物理返回键  也可以写其他逻辑 }

  9. vue 移动端禁用安卓手机返回键

    //禁止手机返回键    下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...

随机推荐

  1. javascript 原生class操作

    <script type="text/javascript"> function hasClass(elements, cName) { return elements ...

  2. mysql导出bug备注

    注:yiicms库和area表均存在

  3. HTTP的三次握手和四次挥手,以及DNS流程解析

    首先模拟一个场景:你在浏览器输入自己想要访问的地址,浏览器发送请求到服务端,服务端进行响应,浏览器进行数据页面渲染,从而你得到自己想要访问地址的页面 总体流程图: DNS:可以认为域名与对应的ip转化 ...

  4. .NET 扩展 官方 Logger 实现将日志保存到本地文件

    .NET 项目默认情况下 日志是使用的 ILogger 接口,默认提供一下四种日志记录程序: 控制台 调试 EventSource EventLog 这四种记录程序都是默认包含在 .NET 运行时库中 ...

  5. Go语言 WaitGroup 详解

    你必须非常努力,才能看起来毫不费力! 微信搜索公众号[ 漫漫Coding路 ],一起From Zero To Hero ! 前言 在前面的文章中,我们使用过 WaitGroup 进行任务编排,Go语言 ...

  6. WPF中使用System.Windows.Interactivity实现事件绑定的替代方法

    一.问题描述 对于 Button 等控件,在 MVVM 中我们能通过 Command 绑定解决 Click 事件.具体如下所示: <Button Margin="10" He ...

  7. Python小白自学笔记:英语不好,变量怎么命名

    变量其实很简单,不过在使用过程中会遇到一些棘手的问题. 比如一个变量我之前已经用过了,现在我要定义一个类似的变量,该怎么办? 还有,很多小伙伴其实知道变量应该遵守什么规范,应该代表什么数据,但是大学英 ...

  8. [CF1526F] Median Queries(交互 / 构造)

    题面 这是一道交互题. 有一个未知的长度为 N \tt N N 的排列 P \tt P P,已知 P 1 < P 2 \tt P_1 < P_2 P1​<P2​ . 每次询问格式为 ...

  9. JZOJ 5796 划分 (容斥,数论,扩展CRT)

    题面 有一个未知的序列 x,长度为 n.它的 K-划分序列 y 指的是每连续 K 个数的和得到划 分序列,y[1]=x[1]+x[2]+....+x[K],y[2]=x[K+1]+x[K+2]+... ...

  10. zkw线段树——简单易懂好写好调的线段树

    0.简介 zkw线段树是一种非递归线段树,与普通线段树不同的是,它是棵标准的满二叉树,所以遍历过程可全程使用位运算,常数一般比线段树小得多. 1.结构/建树 前面说了,zkw线段树是满二叉树,可是原数 ...