具体步骤如下:

1、挂载完成后,判断浏览器是否支持popstate

mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

destroyed(){
window.removeEventListener('popstate', this.goBack, false);
},

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

methods:{
goBack(){
//replace替换原路由,作用是避免回退死循环
this.$router.replace({path: '/mobileMtRoomList'});
}
}

vue浏览器返回监听的更多相关文章

  1. Activity中 左滑动返回监听

    网易新闻中有个比较炫的效果,在QQ进入聊天界面也有这种效果,就是从界面左侧滑动到右侧时,界面退出,其实功能很容易实现: 1) Activity 去实现 implements OnTouchListen ...

  2. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  3. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  4. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  6. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  7. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  8. vue 弹窗时 监听手机返回键关闭弹窗(页面不跳转)

    [注]:  popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对his ...

  9. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

随机推荐

  1. eclipse 编译的时候 自动把SDK需要放入libs里面的so文件给删除了

    解决方法: 右击Project,选Properties->Builders, 把CDT Builder 关掉. 这样就不会编译了.包括c++的代码也不会编译.. 治标不治本啊...以后c++代码 ...

  2. $Python常用内置函数典型用法

    Python中有许多功能丰富的内置函数,本文基于Python 2.7,就常用的一些函数的典型用法做一些积累,不断更新中. sorted函数的三种用法 # coding:utf-8 # sorted函数 ...

  3. 利用arcgis制作出 源解析要用的ASCII文件

    准备:1.确定好模拟区域范围,精度,行列数          2.确定好源解析的城市规划 思路: 1.全国省级图+本地市县图-->合成一张区域图(联合) 合成之后,添加一个字段,一个数字类型字段 ...

  4. Linux查看系统与内核信息(uname、file和lsb_release -a)

    uname 命令 uname 命令可以用来查看系统与内核的相关信息,命令格式如下: [root@localhost ~]# uname [选项] 选项: -a:查看系统所有相关信息: -r:查看内核版 ...

  5. SQL条件!=null查不出数据

    今天有一条sql需要某两个字段不能为空,当然是不能为null也不能为空字符串啦. 然后就开始写 WHERE ( order_amount != null and order_amount != '' ...

  6. elasticsearch 5.x集群安装

    1. 下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.1.tar.gz 2. 解压 为便于 ...

  7. 20145324 《Java程序设计》第10周学习总结

    20145324 <Java程序设计>第10周学习总结 教材学习内容总结 1.网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输 2.在实际传输数据以前需要将域名转换为IP地 ...

  8. 20145231熊梓宏 《网络对抗》 实验5 MSF基础应用

    20145231熊梓宏 <网络对抗> 实验5 MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit就相当于是就是渗透攻击,其 ...

  9. ARTS Week 002

    Algorithm Leetcode 2. Add Two Numbers You are given two non-empty linked lists representing two non- ...

  10. SVN主从高可用

    https://blog.csdn.net/conwayli/article/details/80235738