vue 导航守卫（路由守卫）

vue中路由守卫（路由守卫）一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫

全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫。

• 一般在 main.js 文件中使用，router 即是路由。

• next(false): 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。就像我们调用 router.push 一样。

• 全局前置守卫

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数，顺利通过，往下走
}

• 全局解析守卫

确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。这里有一个例子，确保用户可以访问自定义 **meta **属性 requiresCamera 的路由：

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

• 全局后置钩子

和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

组件路由守卫

• 必须有 next();，相当于一个按钮开启一样，使用了next 代表通过，直接进to 所指路由

• 进入路由时调用，此时不能获取组件实例 this ，因为的当前守卫执行前，组件实例还没被创建

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

• 在当前路由改变，但是该组件被复用时调用，它可以访问组件实例 this，举例来说，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候，

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

• 在导航离开渲染该组件的对应路由时调用（离开当前路由页面时调用），与 beforeRouteUpdate 一样，它可以访问组件实例 this

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

路由独享守卫

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。

• 我们也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

• 官网守卫传送门：vue官网守卫地址

标签：vue,users,next,守卫,组件,path,路由
来源： https://www.cnblogs.com/DL-CODER/p/16529751.html