vue-路由导航(守卫)那些事

在项目开发过程中，有些逻辑需要使用到路由守卫，例如未登录情况下强制跳转到登陆页面、路由重定向

一、路由导航种类

1、全局前置守卫   beforeEach
2、全局后置守卫   afterEach
3、路由独享守卫   beforeEnter  //用的较多
4、组件进入守卫   beforeRouteEnter  //用的较多
5、组件更新守卫   beforeRouteUpdate 
6、组件离开守卫   beforeRouteLeave

二、路由具体使用方法

1、全局前置守卫beforeEach

const router = new VueRouter({ ... })
// to进入时的路由信息对象
router.beforeEach((to, from, next) => {
  if(符合条件){
      //使用next()跳转到指定路由
  }else{
      //使用next()跳转到指定路由
  }
})

2、全局后置守卫afterEach

与beforeEach相似

router.afterEach((to, from) => {
  // ...
})

3、路由独享守卫beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if(符合条件){
            //使用next()跳转到指定路由
        }else{
            //使用next()跳转到指定路由
        }
      
      }
    }
  ]
})

4、组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 此处组件实例还没被创建,无法使用this关键字，但可以通过to(路由信息对象)
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}