vue实现监测浏览器自带返回按钮

在项目开发过程中测试发现在类似从 A 页面进入 B 页面（B 页面右上角有个按钮用来触发打开子组件弹框）。当点击按钮打开 B 页面的子组件，然后点击浏览器自带返回按钮，此时路由会跳转到 A 页面，再次从 A 页面点击进入 B 页面，显示的是 B 页面的子组件。

解决方案如下：
在子组件中对浏览器自带浏览器设置监听。

  // 挂载完成后，判断浏览器是否支持 popstate
  mounted(){if(window.history && window.history.pushState){
        // 往历史记录里面添加一条新的当前页面的 url
        history.pushState(null,null,document.URL);
        // 给 popstate 绑定一个方法 监听页面刷新
        window.addEventListener('popstate', this.backChange, false);
      }
  },
  
  // 页面销毁时，取消监听。否则其他 vue 路由页面也会被监听
  destroyed(){window.removeListener('popstate', this.backChange,false)
  },
  
  methods: {
    // 将监听操作写在 methods 里面，removeEventListener 取消监听内容必须跟开启监听保持一致
    backChange(){this.$emit('change',false)
    }
  }