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 来响应数据的变化: 实例 & ...
随机推荐
- centos7 最小化安装后的配置优化
echo #CENTOS7echo #1.最小化安装之后需要做的事echo 2.配置echo 2.1 安装网络yum install net-tools -y echo 2.2 更新机器名echo h ...
- C++文件操作:打开文件和写入文件
如果程序的运行结果仅仅显示在屏幕上,当要再次查看结果时,必须将程序重新运行一遍:而且,这个结果也不能被保留. 如果希望程序的运行结果能够永久保留下来,供随时查阅或取用,则需要将其保存在文件中. 文件分 ...
- 设置小窗口Activity
http://blog.csdn.net/xieyihua1994/article/details/52586270 我们知道Activity本身是没有界面的.所以activity类创建了一个窗口,开 ...
- flume从log4j收集日志输出到kafka
1. flume安装 (1)下载:wget http://archive.cloudera.com/cdh5/cdh/5/flume-ng-1.6.0-cdh5.7.1.tar.gz (2)解压:ta ...
- 蓝桥杯练习——C++输出阶乘的最右边一位非零数
#include<iostream> #include<iomanip> using namespace std; #define M 10000 #define N 1000 ...
- zookeeper项目使用几点小结
背景 前段时间学习了zookeeper后,在新的项目中刚好派上了用场,我在项目中主要负责分布式任务调度模块的开发,对我自己来说是个不小的挑战. 分布式的任务调度,技术上我们选择了zookeeper,具 ...
- 【eclipse】Multiple annotations found at this line:——解决方法
问题截图: 就是eclipse的maven插件太旧了 用新插件新建的maven项目就没有报错 用软件对比了一下这两个pom文件 只有项目名有区别 所以就是插件的问题 一个简单安装离线maven插件的方 ...
- window 中安装 redis的遇到的一此bug
一.下载 链接:https://github.com/MicrosoftArchive/redis/releases 说明: 如果是是下载msi版本的话会默认帮我们配置好测试 环境,如果是下载zi ...
- centos安装新版svn
CentOS/RHEL yum 安装的 subversion 是 1.6.11 版本,连VisualSVN服务器时会有"Key usage violation"的错误 将subve ...
- 退出Vi(m)
按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并退出vi :wq! 强制保存文件, ...