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