路由导航守卫的使用方法

路由导航守卫是Vue Router的一个重要功能，它可以在每次路由发生变化时拦截路由，从而实现鉴权、路由过滤等功能。

主要有两种：全局守卫和单个路由独享守卫。

全局守卫

全局守卫是在Vue Router实例上注册的函数，它会在每次路由变化时被调用，可以按照一定的规则进行权限校验，从而实现对路由的控制。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects. must call `next`.
  if (to.path === '/login') {
    next()
  } else {
    let token = localStorage.getItem('token')
    if (token === null || token === '') {
      next('/login')
    } else {
      next()
    }
  }
})

上面的代码中，我们使用router.beforeEach()注册了一个全局前置守卫，当路由变化时，它会检查用户是否登录，如果没有登录，则跳转到登录页面，如果已经登录，则继续路由跳转。

单个路由独享守卫

单个路由独享守卫是在路由配置中定义的守卫，它可以拦截指定路由，从而实现针对某个路由进行特殊处理。

// 单个路由独享守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 这里可以做一些权限校验
        let token = localStorage.getItem('token')
        if (token === null || token === '') {
          next('/login')
        } else {
          next()
        }
      }
    }
  ]
})

上面的代码中，我们在路由配置中定义了一个beforeEnter守卫，它会在路由跳转到/foo时被调用，可以检查用户是否已经登录，如果没有登录，则跳转到登录页面，如果已经登录，则继续路由跳转。

路由导航守卫是Vue Router的一个重要功能，它可以在每次路由发生变化时拦截路由，从而实现鉴权、路由过滤等功能。主要有两种：全局守卫和单个路由独享守卫。全局守卫是在Vue Router实例上注册的函数，单个路由独享守卫是在路由配置中定义的守卫，它们可以检查用户是否有权限访问某个路由，从而实现对路由的控制。