路由导航守卫

最新推荐文章于 2025-06-17 11:57:12 发布

小鸟`~`愤飞

最新推荐文章于 2025-06-17 11:57:12 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/L_JH6666/article/details/122244033

本文详细介绍了Vue-Router的导航守卫，包括全局前置守卫、全局后置钩子、全局解析守卫、路由独享守卫和组件内的守卫。重点讲解了router.beforeEach、router.afterEach和beforeRouteEnter等关键守卫的使用方法，以及完整的导航解析流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-Router导航守卫：

有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。

为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档

路由导航守卫

router.beforeEach

router.afterEach

router.beforeResolve

beforeEnter

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

1.全局前置守卫----router.beforeEach

router.beforeEach 注册一个全局前置守卫：

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

router.beforeEach((to, from, next) => {
  //  to:要去哪个页面
  //  from:从哪里来
  //  next:它是一个函数。
  //     如果直接放行 next()
  //     如果要跳到其它页 next(其它页)
})

示例代码：

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  const token = store.state.user

最低0.47元/天解锁文章

200万优质内容无限畅学