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‘});
  }
}

原文地址:https://www.cnblogs.com/jiangweichao/p/10043951.html

时间: 2024-11-05 21:47:21

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

Activity中 左滑动返回监听

网易新闻中有个比较炫的效果,在QQ进入聊天界面也有这种效果,就是从界面左侧滑动到右侧时,界面退出,其实功能很容易实现: 1) Activity 去实现 implements OnTouchListener 2) 实现其中的onTouch方法: /** * 左滑动返回监听 */ @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACT

关于vue中滚动监听失效问题

在vue项目中, 监听window滚动失效;并且document.body.scrollTop一直是0的情况! 查找了许多资料;并没有找到合理的解决方案; 最中发现,在index.html设置了html,body的宽高设置成了100%; 这样会造成window.onscroll监听不到正确的滚出高度(恒为0); 不和你们多bb:解决方案: 将html,body的height设置为auto;即可解决!!

vue.js 组件监听

一.在通过点击事件触发的子组件中: addCart(event) { if (!event._constructed) { return; } if (!this.food.count) { Vue.set(this.food, 'count', 1); } else { this.food.count++; } this.$emit('cartadd', event.target) },// cartcontrol.vue组件 二.在父组件中 <div class="cartcontro

Vue数据的监听

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=d

vue 前端处理监听关键字搜索

根据组件的业务需要,有时候搜索是把关键字返回给后台,后台处理后再把数据返回给前端渲染(多次请求服务器):有时候是前端把页面的数据全部获取下来,前端处理关键字的搜索(影响页面加载) 我这个文章是介绍第二种情况,主要是要先了解es6的filter()和includes() filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.不会对空数组进行检测.不会改变原始数组. array.filter(function(currentValue,index,arr),

vue 父组件监听子组件生命周期

1.方法一 使用$on和$emit // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 2.使用hook // Parent.vue <Child @hook:mounted="doSomething" ></Child> doSomething() { console.l

VUE的watch监听对象

因为普通监听对象时,其实监听的该对象存放的堆地址,只有声明关键子字(deep: true)才能监听整个对象中所有属性变化: 当然如果监听的对象只有一两个属性,也可以直接分别监听其属性: //声明对象 data() { return { obj: { name: '黄国华' } } }, watch: { obj: { handler: function(newVal, oldVal) { console.log(newVal, oldVal); //因为对象为引用类型数据,所以新旧值其实是同一个

vue 在一个页面监听、定时用了之后要销毁,不然在其他页面会报错

1.在一个页面监听.定时用了之后要销毁 2.或者在监听.定时的运行代码,加判断限制 销毁: 加判断: 原文地址:https://www.cnblogs.com/XUYIYUAN/p/12368672.html

vue watch属性监听对象变化。

有时候要监听对象的变化. 我一般用来做一堆input 表单里面条件是否达到,然后按钮的颜色变化. data: { return: { form: { name: '', tel: '', product_value: [], // 产品数组第一个是第一级,第二个是第二级. product_label: '', //产品选择选择对应的文字 xinghao_value: '', // 型号的值 xinghao_label: '', // 型号的名字 guige_value: '', // 规格的值