vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，可以在跳转过程中处理一些事情。
导航守卫分为三种分别是全局守卫、路由独享守卫、组件内部守卫。

全局守卫（两个钩子beforeEach，afterEach）

指路由实例上直接操作的钩子函数，特点是所有配置路由的组件都会触发。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})

beforeEach是在路由跳转前触发，包括to，from，next三个参数，这个钩子作用主要是用于登录验证。

afterEach是在路由跳转完后触发，包括to，from两个参数。

路由独享守卫（一个钩子beforeEnter）

加载页面前所执行的钩子函数。
export default new Router({
  routes: [
    {
      name:"Test",
      path:"/test",
      component:Test,
      beforeEnter(to,from,next){
        if(to.path==="/test"){
          alert("请登录");
          next(false); // 禁止跳转
        }else{
          next()
        }
      }
    },
  ],
})
beforeEnter与全局的beforeEach完全相同，包括to、from、next三个参数。

组件内部守卫（三个钩子beforeRouterEnter，beforeRouterUpdate，beforeRouterLeave）

指在组件内部执行的钩子函数，和Vue的生命周期函数相识。
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
    //...
  },
  beforeRouteUpdate (to, from, next) {
    //...
  },
  beforeRouteLeave (to, from, next) {
   //...
  }
｝

beforeRouteEnter

beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数是在生命周期mounted之后调用，他是所有导航守卫和生命周期函数最后执行的那个钩子。
beforeRouteEnter(to, from, next) {
  next(vm => {
      vm.$router.replace(from.path);
   })
}
beforeRouteEnter是在路由进入组件之前调用，包括to，from，next三个参数。该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例this，是在beforeCreate生命周期前触发。
beforeRouteUpdate是在路由改变时调用，如果某组件被复用时调用，可以通过this访问实例。包括to，from，next三个参数。
beforeRouteLeave是在导航离开时调用，可以访问组件实例this，包括to，from，next三个参数。