导航守卫

全局守卫

beforeEach

router.beforeEach((to, from, next) => {
  console.log('before each')
  next()
})

• 路由开始时被调用
• 所有路由都会调用

beforeResolve

router.beforeResolve((to, from, next) => {
  console.log('before resolve')
  next()
})

• 路由确认前被调用，即经过全局守卫、路由守卫、组件守卫之后，即将确认该路由之前被调用
• 所有路由都会调用

afterEach

router.afterEach((to, from) => {
  console.log('after each')
})

• 路由确认之后被调用
• 所有路由都会调用
• 没有next，因为不需要

路由守卫

beforeEnter

const routes = [
  {
    path: '/about/:id',
    name: 'About',
    component: About,
    beforeEnter(to, from, next) {
      console.log('in router: before enter')
      next()
    },
  }
]

• 全局守卫之后进入路由守卫
• 路由参数(/path/:id)或查询参数(/path?id=xx)的变化不触发

组件守卫

beforeRouteEnter

export default {
  name: 'Home',
  beforeRouteEnter(to, from, next) {
    console.log('in component: before route enter home')
    next()
  }
}

• 路由守卫之后进入组件守卫

• 路由参数(/path/:id)或查询参数(/path?id=xx)的变化不触发

• 函数内this为undefined，因为此时组件实例还未创建

• 可以在next()中传入回调函数，该回调将在路由结束后调用(只有该守卫可以传入回调，其他组件守卫不支持，因为不需要)

   beforeRouteEnter(to, from, next) {
      console.log('in component: before route enter home')
      next((vm) => {
        console.log('callback')
      })
    },
  

beforeRouteUpdate

export default {
  name: 'Home',
  beforeRouteUpdate(to, from, next) {
    console.log('in componet: before route update home')
    next()
  }
}

• 路由参数(/path/:id)或查询参数(/path?id=xx)的变化时触发

beforeRouteLeave

export default {
  name: 'Home',
  beforeRouteLeave(to, from, next) {
    console.log('in componet: before route leave home')
    next()
  }
}

• 导航离开该组件对应的路由时调用

参数说明

• to: 目标路由对象(Route)
• from: 离开的路由对象(Route)
• next: 函数对象，调用next()指定下一步的行为
  • next(): 传递给下一个守卫
  • next(false): 终止导航
  • next('/'): 导航至新地址，传入path
  • next({path: '/'}): 导航至新地址，传入目标地址的对象，参考router.push (opens new window)的传参
  • next(error): 终止导航，并将Error对象传递router.onError()回调