具体步骤如下:

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. NGUI混合FingerGesture《卷二》分离触摸事件

    背景 在使用NGUI按钮组件的时候,点击按钮同时触发FingerGesture的Touch事件, 通俗点讲,NGUI点击之后,点击事件被FingerGesture又执行了一遍. 解决思路 持有一个全局 ...

  2. 写入Csv

    //定义文件输出流  FILE *f; f = fopen("a.csv" , "wb"); fprintf(f,"aaa,23,sdf\n" ...

  3. 国光大力推荐(安利)Deepin15.4

    简介 深度操作系统15.4 Beta(deepin15.4)相比deepin15.3来看,外观上要更加优雅.现在还在内测中,相信不就官网就会发布正式版.小子昨天下午删了我的windows10,特意来尝 ...

  4. Python3.x:BeautifulSoup()解决中文乱码问题

    Python3.x:BeautifulSoup()解决中文乱码问题 问题: BeautifulSoup获取网页内容,中文显示乱码: 解决方案: 遇到情况也是比较奇葩,利用chardet获取网页编码,然 ...

  5. Centos6优化系统服务脚本

    #!/bin/bash SysVer=`cat /etc/redhat-release | awk -F'release' '{print $2}' | awk -F'[ .]+' '{print $ ...

  6. openwrt下定义软件包的依赖关系类型

    在openwrt下软件包的依赖关系由DEPENDS:=来指定 第一种依赖关系类型为只有将依赖的软件包手动选上,当前的软件包就会自动被选中,用法为DEPENDS:=package_name 第二种依赖关 ...

  7. JasperReports实现报表调出excel

    一.利用工具iReport 创建task.jrxml 模板 并生成 task.jasper 文件 二.搭建工程导入以下jar包 commons-beanutils-1.9.2.jar commons- ...

  8. nginx作为TCP反向代理

    基于windows环境 基于nginx1.12.2版本 1. 解压nginx 2. 修改conf配置 # 打开conf/nginx,conf文件,写入以下配置 # upstream backend 里 ...

  9. Python学习札记(十九) 高级特性5 迭代器

    参考:迭代器 Note 1.可用于for循环的对象有两类:(1)集合数据类型:list tuple dict str set (2)Generator:生成器和含yield语句的函数.这些可以直接作用 ...

  10. Centos 查看端口占用情况

    netstat -ntlp 把相应PID kill掉即可