vue-router 导航守卫

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

1、全局守卫

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

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

next()

next(false): 中断当前的导航。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。

2、全局后置钩子

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

3、路由独享的守卫

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