具体步骤如下:

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. java: -source 1.6 中不支持 switch 中存在字符串

    最近在使用IDEA进行单个文件编译的时候给我报错,如题. 解决办法:将 Modules --->Sources ---> Language level 改为 7.0就ok了.

  2. ABP官方文档翻译 1.1 介绍

    介绍 介绍 快速示例 其他 启动模板 如何使用 介绍 我们通常会根据不同的需求来创建不同的应用程序.但是对于一些通用相似的结构总是一遍又一遍的实现,至少在某种程度上是这样的.常见的通用模块如授权.验证 ...

  3. 将std::array转换成std::tuple

    template<typename Array, std::size_t... Index> decltype(auto) array2tuple_impl(const Array& ...

  4. c++ 跳转语句块

    p170~p172:跳转语句:1.break:对while for switcho有效!2.continue:中断当前迭代,但是循环还要继续.因此对while for有效,对switch无效!3.go ...

  5. java类库字符串操作

    在java类库中,java给我们提供了字符串几个特别的操作,分别是String,Stringbuffer,Stringbuilder等.下面就对这几个类做一个简单的介绍.首先,我们先了解一下Strin ...

  6. ASP.NET OAuth Authorization - Difference between using ClientId and Secret and Username and Password

      What I don't fully understand is the use of ClientId and Secret vs Username and Password. The code ...

  7. linux一键安装php脚本

    #!/bin/sh echo "----------------------------------start install php --------------------------- ...

  8. ubuntu 18. use gnome-tweaks

    <<install gnome-tweaks sudo apt-get install gnome-tweaks <<run gnome-tweaks >>pres ...

  9. JavaScript设计模式与开发实践:惰性函数

    Web开发中,因为浏览器之间的差异实现差异,一些嗅探工作总是不可避免的,比如我们需要在各个浏览器中能够通用事件绑定函数addEvent //一般写法 //缺点:当他每次被调用的时候都都会执行里面的if ...

  10. Floyd判圈算法 Floyd Cycle Detection Algorithm

    2018-01-13 20:55:56 Floyd判圈算法(Floyd Cycle Detection Algorithm),又称龟兔赛跑算法(Tortoise and Hare Algorithm) ...