美文网首页
js监听app的返回键

js监听app的返回键

作者: 前端又又 | 来源:发表于2019-07-24 20:34 被阅读0次

    利用history和浏览器 刷新popstate状态 去实现

    每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新,去做一些事情。

    1、挂载完成后,判断浏览器是否支持popstate

    mounted(){

      // 如果支持 popstate 一般移动端都支持了

      if (window.history && window.history.pushState) {

        // 往历史记录里面添加一条新的当前页面的url

        history.pushState(null, null, document.URL);

        // 给 popstate 绑定一个方法 监听页面刷新

        window.addEventListener('popstate', this.backChange, false);//false阻止默认事件

      }

    },

    2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

         destroyed(){ window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件},

    3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

    methods:{// BBBB.vue backChange() { const that = this; console.log("监听到了");}

    相关文章

      网友评论

          本文标题:js监听app的返回键

          本文链接:https://www.haomeiwen.com/subject/yagfrctx.html