vue Router 路由守卫之beforeEach

你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接...

Servenity

21478人浏览 · 2018-06-07 11:48:39

Servenity · 2018-06-07 11:48:39 发布

你可以使用 router.beforeEach 注册一个全局前置守卫：

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

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

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

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

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() 注册过的回调。

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

以上内容是官方提供的：

路由拦截是我们项目中经常遇到的普遍问题，例如当你访问任何一个页面的时候需要验证该用户有没有登录等；

对此，vue-router提供的beforeRouter可以方便的实现路由的导航守卫；

啥也不说了上例子

  // 列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面login；
 
  // 当直接进入登录页面login时，如果“已登录状态”，则跳转到首页home；
 
  const router = new Router({
 
  routes: [
 
  {
 
  path: ' / ', //  默认进入路由
 
  redirect: ' /home ' // 重定向
 
  },
 
  {
 
  path: ' /login ',
 
  name: ' login ',
 
  },
 
  {
 
  path: ' /home ',
 
  name: ' home ',
 
  },
 
  {
 
  path: ' /list ',
 
  name: ' list ',
 
  },
 
  {
 
  path: ' ** ', //  错误路由
 
  redirect: ' /home ' // 重定向
 
  },
 
  ]
 
  });
 
  //  全局路由守卫
 
  router. beforeEach(( to, from, next) => {
 
  console. log( ' navigation-guards ');
 
  //  to: Route: 即将要进入的目标 路由对象
 
  //  from: Route: 当前导航正要离开的路由
 
  //  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 
  const route = [ ' home ', ' list '];
 
  let isLogin = isLogin; //  是否登录
 
  //  未登录状态；当路由到route指定页时，跳转至login
 
  if ( route. indexOf( to. name) >= 0) {
 
  if ( ! isLogin) {
 
  this. $router. push({ path: ' /login ',});
 
  }
 
  }
 
  //  已登录状态；当路由到login时，跳转至home 
 
  if ( to. name === ' login ') {
 
  if ( isLogin) {
 
  this. $router. push({ path: ' /home ',});;
 
  }
 
  }
 
  next();
 
  });
 
  export default router;