vue浏览器返回监听
具体步骤如下:
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浏览器返回监听的更多相关文章
- Activity中 左滑动返回监听
网易新闻中有个比较炫的效果,在QQ进入聊天界面也有这种效果,就是从界面左侧滑动到右侧时,界面退出,其实功能很容易实现: 1) Activity 去实现 implements OnTouchListen ...
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- vue 弹窗时 监听手机返回键关闭弹窗(页面不跳转)
[注]: popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对his ...
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
随机推荐
- eclipse 编译的时候 自动把SDK需要放入libs里面的so文件给删除了
解决方法: 右击Project,选Properties->Builders, 把CDT Builder 关掉. 这样就不会编译了.包括c++的代码也不会编译.. 治标不治本啊...以后c++代码 ...
- $Python常用内置函数典型用法
Python中有许多功能丰富的内置函数,本文基于Python 2.7,就常用的一些函数的典型用法做一些积累,不断更新中. sorted函数的三种用法 # coding:utf-8 # sorted函数 ...
- 利用arcgis制作出 源解析要用的ASCII文件
准备:1.确定好模拟区域范围,精度,行列数 2.确定好源解析的城市规划 思路: 1.全国省级图+本地市县图-->合成一张区域图(联合) 合成之后,添加一个字段,一个数字类型字段 ...
- Linux查看系统与内核信息(uname、file和lsb_release -a)
uname 命令 uname 命令可以用来查看系统与内核的相关信息,命令格式如下: [root@localhost ~]# uname [选项] 选项: -a:查看系统所有相关信息: -r:查看内核版 ...
- SQL条件!=null查不出数据
今天有一条sql需要某两个字段不能为空,当然是不能为null也不能为空字符串啦. 然后就开始写 WHERE ( order_amount != null and order_amount != '' ...
- elasticsearch 5.x集群安装
1. 下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.1.tar.gz 2. 解压 为便于 ...
- 20145324 《Java程序设计》第10周学习总结
20145324 <Java程序设计>第10周学习总结 教材学习内容总结 1.网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输 2.在实际传输数据以前需要将域名转换为IP地 ...
- 20145231熊梓宏 《网络对抗》 实验5 MSF基础应用
20145231熊梓宏 <网络对抗> 实验5 MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit就相当于是就是渗透攻击,其 ...
- ARTS Week 002
Algorithm Leetcode 2. Add Two Numbers You are given two non-empty linked lists representing two non- ...
- SVN主从高可用
https://blog.csdn.net/conwayli/article/details/80235738