vue路由守卫详解

Posted 2021-06-08 吴小明

一、分类：全局守卫、路由独享守卫、组件内路由守卫

　　全局守卫：

router.beforeEach((to, form, next) => {
  console.log(\'全局前置守卫 beforeEach\')
  next()
})
router.beforeResolve((to, form, next) => {
  console.log(\'全局解析守卫 beforeResolve\')
  next()
})
router.afterEach((to, form) => {
  console.log(\'全局后置守卫 afterEach\')
})

　　路由独享守卫：

  {
    path: \'/list\',
    name: \'list\',
    alias: \'/aaa\',
    component: () => import(\'@views/List\'),
    children: [
      {
        path: \':id\',
        name: \'details\',
        component: () => import(\'@views/Details\'),
        props: true,
        beforeEnter: (to, from, next) => {
          console.log(\'路由独享守卫 beforeEnter\')
          next()
        }
      }
    ]
  }

　　组件内守卫：

  beforeRouteEnter(to, from, next) {
    console.log(\'组件内路由前置守卫 beforeRouteEnter\', this) // 访问不到this
    next((vm) => {
      console.log(\'组件内路由前置守卫 vm\', vm) // vm 就是this
    })
  },
  beforeRouteUpdate(to, from, next) {
    console.log(\'组件内路由更新守卫 beforeRouteUpdate\')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log(\'组件内路由离开守卫 beforeRouteLeave\', this)
    next()
  }

 

二、路由的执行顺序：

　　全局前置守卫 beforeEach

　　路由独享守卫 beforeEnter

　　组件内路由前置守卫 beforeRouteEnter

　　全局解析守卫 beforeResolve

　　全局后置守卫 afterEach

　　组件生命周期：创建前 beforeCreate

　　组件生命周期：创建后 created

　　组件生命周期：挂载前 beforeMount

　　组件内路由前置守卫 beforeRouteEnter 的 next 回调
　　组件生命周期：挂载后 mounted

三、路由守卫的参数：

　　to：路由要去哪儿

　　from：路由来自哪儿

　　next：是一个函数，路由守卫中一定要调用这个函数来使当前路由状态为 reslove。执行的效果由next函数中的参数决定，它的参数有以下4种情况：

　　　　next()：没有参数，表示可以进入到to的路由中

　　　　next(false)：参数为一个布尔值false，中断当前的导航，回到from路由

　　　　next(\'/\') 或 next({ path: \'/\' })：参数为一个路径，相当于执行了this.$router.push(\'/\')

　　　　next(error)：参数为error，中断当前导航，将该错误传递给router.onError()注册过的回调

　　注意：必须要确保next函数在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。

　　错误的案例：

router.beforeEach((to, from, next) => {
  if (to.name !== \'Login\' && !isAuthenticated) next({ name: \'Login\' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})

　　正确的写法：

router.beforeEach((to, from, next) => {
  if (to.name !== \'Login\' && !isAuthenticated) next({ name: \'Login\' })
  else next()
})