v-router中的导航守卫

响应路由参数的变化

v-router提供的导航守卫主要用来通过跳转或者取消的方式守卫导航。有多种机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的

注：复用组件的时候，想对路由参数的变化做出响应的话，你可以简单地watch（监听变化）$route对象

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用2.2中引入的beforeRouteUpdate守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

如何更好的理解v-router中的钩子

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

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve这个钩子。执行效果依赖

  next

  方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed（确认的）。

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from路由对应的地址。

  • next('/') 或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个Error实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

确保要调用next方法，否则钩子就不会被 resolved。

---

项目中的使用

router.beforeEach((to, from, next) => {
  let code = webStorage.get('TOKEN') || false
  if (code && to.name === 'login') {
    next({name: 'manage'})
  } else if (!code && to.name === 'login') {
    next()
  } else if (!code) {
    next({name: 'login'})
  } else {
    next()
  }
})