016.Vue-Router（四）

---

01. 导航守卫

（1）概念

• 导航守卫主要用来通过跳转或取消的方式守卫导航

（2）分类

（a）全局守卫

• 全局前置守卫：router.beforeEach

• 全局解析守卫：router.beforeResolve

• 全局后置钩子：router.afterEach

  每个守卫方法可有接收三个参数

  • to：即将前往的目标路由对象

  • from：当前正要离开的路由对象

  • next：一个方法，导航守卫的执行效果依赖于这个方法的调用参数

    • next()：表示放行，可以前往目标路由

    • next(false)：表示中断当前导航

    • next(‘/’)：表示中断当前导航，并跳转到一个新的路由

      • 这里内部参数设置同路由跳转参数设置一致

    • next(error)：表示终止导航，并传递一个Error实例

      • 这个错误实例将被router.onError()注册的回调接收

        router.onError(callback => { 
            console.log('出错了!', callback);
        });
        

  // 全局前置守卫
  router.beforeEach((to, from, next) => {
      // 比如这里对一个前往首页的路由作
      if(to.path === '/login') {
          // 如果前往页面为登录页面 [/login], 则放行
          next()
      }else {
          // 如果前往页面不是登录页面，则强制跳转为登录页面 [/login]
          next('/login')
      }
  })
  

  // 全局解析守卫
  router.beforeResolve((to, from, next) => {
      // 这里演示一下错误实例
      next(error) // 这个 error 将作为参数传递给 onError 方法
  })
  router.onError(callback => { 
      console.log('WoW，发生了一些错误!', callback)
  });
  

  全局前置守卫和全局解析守卫的区别：

  • 两者都是在跳转路由之前触发
    • 但，全局解析守卫是在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后触发
    • 即，在afterEach之前，在beforeEach和beforeRouteEnter或者beforeRouteUpdate之后

  // 全局后置钩子
  router.afterEach((to, from) => {
    // ...
  })
  

  全局后置钩子不接受next参数，它是在路由跳转完成之后触发，不会改变导航

（b）路由独享守卫

• 为某个路由对象单独配置的守卫：beforeEnter

  • 路由对象只独享这一个钩子，并且需要在routes里进行配置
  • 路由独享守卫与全局前置守卫的方法、参数一致

  const routes = [{
      path: '/user',
      name: 'User',
      component: User,
      beforeEnter: (to, from, next) => {
          // do something
      }
  }]
  

（c）组件内守卫

• 组件内部可以定义以下守卫

  • beforeRouteEnter：在进入路由前、组件实例创建之前调用
    • 在这个阶段不能获取组件实例this
    • 但可以通过给next()方法传递一个回调来访问组件实例
  • beforeRouteUpdate：在路由改变，但又复用同一个组件时调用
    • 如：从/user1跳转到user/2
  • beforeRouteLeave：在离开当前路由时调用

  export default {
      beforeRouteEnter(to, from, next) {
          next( vm => {
              // 通过 [vm] 访问组件实例
          })
      },
      beforeRouteUpdate(to, from, next) {
          // 在当前路由改变，但是该组件被复用时调用
      },
      beforeRouteLeave(to, from, next) {
          // 导航离开该组件的对应路由时调用
      }
  }
  

（3）解析流程

• 详情见官网

  

02. 监听router变化

• 参数或查询的改变，并不会触发进入（离开）的导航守卫

  • 但可以通过监听 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

• 通过watch监听路由变化

  export default {
      watch: {
          $route(to, from){
              // do something
          }
      }
  }