Vue之路由守卫实现不能后退的问题

前言

  路由守卫，顾名思义：在路由跳转的时候起到一定的保护作用。比如说：跳转主界面的时候先去登录，登录成功之后才可以进入主界面。就可以使用路由守卫，但是小编今天想要分享的是路由守卫的另一个用处。

需求分析

  假设我现在有A、B、C、D、E、F、G7个界面，在A、B、C三个界面的时候可以正常返回上一个界面，即由A到B到C，也可以由C到B到A，但是从D开始，D可以到E，E可以到F，F可以到G，但是G不能返回F，F不能返回E，E不能返回到D，D不能返回到C，当我在D、E、F、G界面的时候，按手机上的返回键返回到首页，甚至是退出系统。
  PS：有点绕，简单说，就是前三个界面可以返回到上一个界面，后四个界面不能返回到上一个界面，如果按手机上的返回键，只能返回到首页或者是退出这个系统。

需求实现

 思路一：使用replace代替push

  前3个界面可以正常使用push将路由推进去，这样可以正常返回，后面不能返回的时候可以使用replace代替push，这样就不会存上一个路由了，也就返回不了了。

this.$router.replace('D')

  实现效果：第5个界面的确返回不了第4个界面，但是按手机上的返回键的时候，直接就到了第2个界面（因为还存着第2个界面的路由）。

 思路二：使用路由守卫

  利用路由守卫中的函数，实现从那个界面离开跳到那个界面的时候，让他定位到首页。

router.beforeEach((to, from, next) => {
  const fromRoute = ['D','E','F','G']
  const nextRoute = ['B','C']
  if (fromRoute.indexOf(from.name) >= 0){
    if(nextRoute.indexOf(to.name) >=0 ){
      router.replace({ name:'A'})
    }     
  }
  next();
});

  实现效果：实现了自己的需求。

总结

  这次用到了路由守卫，不知道大家还有没有其他的方法呢？比如说禁用手机上的返回键之类的，欢迎交流分享啊！