Vue - Router 路由守卫

Vue-Router的项目中,当路由发生跳转的时候,会触发一系列的钩子函数( 这些钩子函数就是路由守卫的钩子函数 )。

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

  - 全局前置守卫  router.beforeEach

  - 全局解析守卫  router.beforeResolve (2.5.0新增) 

        这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

  - 全局后置守卫  router.afterEach

        这个守卫不会接收 next 函数,也不会改变导航本身

  - 路由独享的守卫  beforeEnter 是路由规则配置的一个选项

  - 组件内的守卫 是组件的选项配置

    - 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`
  }}

每个守卫方法接收3个参数:

 - to  即将要进入的路由对象

 - from 当前导航要离开的路由

 - next 一定要调用这个方法来 resolve 这个钩子, 执行效果依赖 next 传的参数

next的使用:

- next()    去下一步

 - next(false) || 不写 next()    阻止跳转

 - next('/home')    主动帮你跳转到 /home 路由上

 -next({

    path: '',

    query: {...},

    name: '',

    params: {...}

})