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. vscode problem

    1.Inconsistent use of tabs and spaces in indentation 原因:tab和空格键不能同时使用 vs code按住ctrl + p,输入以下内容 >c ...

  2. Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...

  3. Odoo14 ir.actions.act_window

    xml声明 1 <record id="res_company_user_action" model="ir.actions.act_window"> ...

  4. cache2go-源码阅读

    简介 cache2go 是非常简短的 go 开源项目了,很适合作为第一个读源码项目. 如果你有一定的 go 开发经验,读起来会感觉到比较容易. 如果你刚刚接触 go 语音,基础知识还不完全了解,希望阅 ...

  5. Apache DolphinScheduler 项目笔记 — 1. 问题定位和排查问题

    导语: Yuanhao Ji 同学是<暑期 2021 - API 模块 UT 测试问题解决>项目负责人,本文记录了他是如何排查和定位问题. 1. 背景 问题:在部分 UT 中使用 Powe ...

  6. CF280D k-Maximum Subsequence Sum(线段树)

    在做这题时我一开始把\(tag\)写入了结构体 #include <iostream> #include <cstdio> #include <cstring> # ...

  7. 1、spingIOC+IDEA+Maven

    1.先配置spring.springmvc通用xml文件的头部信息 spring.springmvc通用xml文件的模板内容如下: 1 <?xml version="1.0" ...

  8. 图解 Kafka 超高并发网络架构演进过程

    阅读本文大约需要 30 分钟. 大家好,我是 华仔, 又跟大家见面了. 上一篇作为专题系列的第一篇,我们深度剖析了关于 Kafka 存储架构设计的实现细节,今天开启第二篇,我们来深度剖析下「Kafka ...

  9. 使springAOP生效不一定要加@EnableAspectJAutoProxy注解

    在上篇文章<springAOP和AspectJ有关系吗?如何使用springAOP面向切面编程>中遗留了一个问题,那就是在springboot中使用springAOP需要加@EnableA ...

  10. YC-Framework版本更新:V1.0.9

    分布式微服务框架:YC-Framework版本更新V1.0.9!!! 本文主要内容: 1.V1.0.9版本更新主要内容 2.YC-Framework新的征程 一.V1.0.9版本更新主要内容 (1)接 ...