详解VueRouter进阶之导航钩子和路由元信息

const router = new VueRouter({ ... })

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

router.afterEach(route => {
 // ...
})

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   ponent: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当钩子执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

beforeRouteEnter (to, from, next) {
 next(vm => {
  // 通过 `vm` 访问组件实例
 })
}

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   ponent: Foo,
   children: [
    {
     path: 'bar',
     ponent: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})