处理移动端首页返回键返回到登录页面的问题

前言
        在开发项目时，总会遇到首页点击返回键就会跑到登录页去，登录页点击返回又跑到其他页面，这就看起来很奇怪，为了防止这种现象发生，个人联合了两种方法解决的这个问题，第一种是通过监听来阻止此事件发生，第二种是利用vue的导航守卫来阻止。

方法一

        当在首页时，不想返回到登录页，我采用第一种，添加监听器的方法
        在APP.vue处理登录返回问题：
                1、挂载完后判断是否支持popstate
                2、页面销毁时取消监听，否则其他路由页也会被监听到，调用销毁页面的钩子函数destroyed
                3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里         面写

export default{
	name:'',
	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({path: '/showStudent'});
        //replace替换原路由，作用是避免回退死循环
      },
	}
}

方法二

        在登录页点击返回避免返回到其他页面，我采用vue的导航守卫处理这个问题。Vue的导航守卫——正如其名，vue-router提供的导航守卫要用来通过跳转或取消的方式守卫导航。

参数：
		To:Router：即将要进入的目标路由对象
		From：Router：当前导航正要离开的路由
		Next：Function：一定要调用该方法来进入导航，否则将没有任何跳转信息。
			Next（）:进入管道中的下一个钩子即下一个路由；
			Next（false）：中断当前的导航。
			Next（“/”）或者next（{path：“/”}）：跳转到一个指定的地址。

export default{
	name:'',
	methods:{...},
	beforeRouteLeave(to,from,next){
      console.log("哈哈，我是路由导航守卫")
      if(this.user){//加判断条件，登录之后user才会有值，如果没有登录，返回就直接返回到原页面，如果有就继续往下进行。
        console.log("守卫",this.user)
        next();
      }else{
        next({path:'/'});
      }
    }
}