一个小方法，不知道合不合理，但至少能用...

前言

首先这里有三个页面：首页——A页——B页。

B页有两个事件触发时会跳转到A页：返回和提交。

返回使用的是原生监听返回事件，同时有个需求，要传参，再根据参数渲染A页。
提交则是点击按钮跳转到新的A页。

下面是监听返回事件：

mounted(){
    if (window.history && window.history.pushState) {
      history.pushState(null,null,document.URL)
	//监听返回
      window.addEventListener('popstate', this.goBack, false);
    }
  },
  destroyed(){
	//移除监听
      window.removeEventListener('popstate', this.goBack, false);
  },
}

methods:{
    goBack(){
      this.$router.replace({
        name: "A",
        params: {
          type:"a"
        },
      });
    }
}

然而有问题：

返回时，跳转到A页；在A页点返回，正常返回到首页。(然后首页再点击返回会跳转到B页，应该是这样，忘了)
提交时，跳转到A页；在A页点返回，异常返回到了B页。

总之，只要你想监听原生返回事件，就要使用history.pushState，而一旦使用它，那条记录会一直存在。找了大半天解决方法，最后选择粗暴地全程replace。

解决方法

给B页添加一个属性isSubmit：

data{
	isSubmit:false
}

如果点击了提交，那么就在提交之前将isSubmit改为true：

this.isSubmit=true

然后运用生命周期destroyed（页面摧毁）。由于现在只有提交和返回会改变路由，摧毁页面。所以当isSubmit为false的时候，说明触发的是返回事件：

destroyed(){
  if(!this.isSumbit){
    this.$router.replace({
      name: "A",
      params: {
          type:"a"
      },
    });
  }
},

同理，由于A页不是跳转首页就是跳转B页，于是给A页也添加一个属性isSubmit。如果触发的事件是要跳转B页，那么在该事件之前将isSubmit改为false即可。

beforeDestroy(){
  if(!this.isSubmit){
    this.$router.replace({name:'index'})
  }
},

vue监听返回事件

前言

解决方法