Vue Router 导航守卫深度解析：全面掌握路由控制机制

最新推荐文章于 2025-06-02 09:03:06 发布

伍虎州Spirited

最新推荐文章于 2025-06-02 09:03:06 发布

阅读量289

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00822/article/details/148375018

版权

Vue Router 导航守卫深度解析：全面掌握路由控制机制

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

前言

在单页应用开发中，路由控制是核心功能之一。Vue Router 提供的导航守卫系统允许开发者在路由切换的各个关键节点插入自定义逻辑，实现权限控制、数据预加载、页面跳转拦截等高级功能。本文将全面剖析 Vue Router 的导航守卫机制，帮助开发者深入理解并灵活运用这一强大特性。

导航守卫概述

导航守卫本质上是路由切换过程中的一系列钩子函数，它们按照特定顺序执行，开发者可以在这些钩子中实现业务逻辑。根据作用范围不同，导航守卫可分为三类：

全局守卫：作用于所有路由
路由独享守卫：作用于特定路由
组件内守卫：作用于特定组件

全局守卫详解

全局前置守卫 (beforeEach)

这是最常用的守卫类型，会在路由切换开始时触发：

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next() // 必须调用
})

参数说明：

to: 目标路由对象
from: 当前路由对象
next: 控制函数，必须调用

next函数有四种调用方式：

next(): 放行到下一个守卫
next(false): 中断当前导航
next('/path'): 重定向到指定路径
next(error): 传递错误（2.4.0+）

重要提示：忘记调用next()会导致导航挂起，应用将无响应

全局解析守卫 (beforeResolve)

2.5.0新增的守卫类型，在导航确认前最后触发：

router.beforeResolve((to, from, next) => {
  // 确保异步组件已解析
  next()
})

与beforeEach的区别在于：

执行时机更靠后
确保异步路由组件已加载完成

全局后置钩子 (afterEach)

在导航完成后触发，适合执行页面统计等操作：

router.afterEach((to, from) => {
  // 无next参数，不影响导航
})

特点：

无next参数
不能改变导航结果
适合执行无阻塞操作

路由独享守卫

可以直接在路由配置中定义beforeEnter守卫：

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 专属于/admin的路由守卫
    if (!isAuthenticated()) next('/login')
    else next()
  }
}

特性：

只对当前路由生效
参数与全局守卫一致
执行优先级高于组件内守卫

组件内守卫

组件内守卫提供了最细粒度的路由控制：

beforeRouteEnter

beforeRouteEnter(to, from, next) {
  // 组件实例未创建，无法访问this
  next(vm => {
    // 通过vm访问组件实例
  })
}

特点：

导航确认前执行
组件实例未创建
唯一可通过回调访问实例的守卫

beforeRouteUpdate

beforeRouteUpdate(to, from, next) {
  // 组件复用时触发
  // 可以访问this
  next()
}

使用场景：

动态参数路径（如/user/:id）
组件复用但参数变化时

beforeRouteLeave

beforeRouteLeave(to, from, next) {
  // 离开当前路由前触发
  if (unsavedChanges) {
    if (confirm('有未保存的更改，确定离开？')) next()
    else next(false)
  } else {
    next()
  }
}

典型应用：