导航守卫

导航守卫

• 导航守卫的参数，to 和 from 都是路由对象
• 导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
• 参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
• 每个守卫方法接收三个参数：
  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

完整的导航解析流程

• 导航被触发。
  • 默认项目中，App.vue这个被用来替换dom的根组件上的导航守卫不会被触发
  • 根vue实例在被创建时就会触发响应的导航守卫，而不是等到挂载时才触发
• 在失活的组件里调用离开守卫。beforeRouteLeave（组件级）通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
• 调用全局的 beforeEach 守卫（全局前置守卫）。一般和路由对象中的meta下的信息配合，用于判断是否需要判断登录状态及是否登录
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)（组件级）。
• 在路由配置里调用 beforeEnter（路由级）。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter（组件级）。一般通过这个守卫在导航完成之前获取数据，这时用户会停留在上一个界面，因此建议在数据获取期间，显示一些进度条或者别的指示（上一个组件）。如果数据获取失败，同样有必要展示一些全局的错误提醒（当前组件）。
• 调用全局的 beforeResolve 守卫 (2.5+)（全局）。beforeResolve （在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后）
• 导航被确认。
• 调用全局的 afterEach 钩子（全局）。
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

全局3种

• 在 2.5.0+ 这三个方法都返回一个移除已注册的守卫/钩子的函数。

router.beforeEach

• router.beforeEach 注册一个全局前置守卫：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

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

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

router.beforeResolve

• 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

router.afterEach

• 可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

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

路由级

• 可以在路由配置上直接定义 beforeEnter 守卫

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

组件级3种

• 挂载用来替换dom的组件的组件级导航守卫是不会触发的
• 路由切换只能触发router-view下父组件的路由守卫，不能触发内部子组件的路由守卫
• 可以在组件内直接定义以下路由导航守卫：

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`
    // 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
  }
}

beforeRouteLeave

• beforeRouteLeave路由守卫，需要通过router.push等方法才能够触发，直接切换URL不能够

beforeRouteEnter

• beforeRouteEnter 守卫可以通过传一个回调给 next来访问组件实例。beforeRouteEnter中的next在create之后被触发

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