vue 导航守卫（路由守卫）

2022-07-28 18:31:15 阅读：160 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 导航守卫（路由守卫）

全局路由守卫

组件路由守卫

路由独享守卫