vue如何控制浏览器前进后退操作

  公司cms后台系统，导航功能比较复杂，点击浏览器后退按钮，发现路由改变，顶部还有左侧导航未改变，导航如下图，经查阅先找到一种可行的方法，问题已解决。

在default.vue中加入如下代码：

具体操作如下：

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

mounted(){
     if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.cancel, false);
  }
  },

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

destroyed(){
  window.removeEventListener('popstate', this.cancel, false);
  }

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

cancel: function() {
    if(this.orderId){
        this.$router.push({
            name:"orderList",
            params: {id:this.orderId},
                });
      }else{
      this.$router.go(-1);
      }
 
  },

注：cancel方法中的处理可根据自己的业务需要来写，上述方法仅供参考，步骤1,2中的方法可以照搬。