引言

Vue Router 4 是 Vue 生态官方提供的专属路由管理器，专为 Vue 3 单页面应用（SPA）设计。其核心价值是建立 URL 路径与 Vue 组件的映射关系，通过内置路由组件实现页面视图的动态切换、导航控制，同时保证 URL 地址与页面内容实时同步，是开发企业级 Vue 3 项目的核心基础依赖。该工具深度适配 Vue 3 组合式 API 生态，同时兼容传统选项式 API，具备轻量化、高可定制、易扩展的特性，全面覆盖前端路由的基础与高阶场景需求。

核心特性

Vue Router 4 提供了完善的前端路由能力，核心特性包含（但不限于）：

• 嵌套路由映射：支持多级子路由配置，完美适配复杂布局与组件嵌套场景

• 动态路由匹配：支持根据 URL 动态参数渲染对应组件，适配列表 / 详情等通用业务

• 模块化、基于组件的路由配置：支持拆分路由配置文件，实现模块化管理，提升项目可维护性

• 路由参数、查询、通配符：支持路径参数、查询参数、通配符匹配，满足灵活的路由规则定义

• 无缝适配 Vue 过渡系统：结合 Vue 内置过渡动画，实现页面切换的平滑动效

• 精细化导航控制：提供全局、路由独享、组件内三级导航守卫，支持路由拦截与业务逻辑处理

• 自动激活 CSS 类的链接：为激活的导航链接自动添加样式类，简化导航状态管理

• HTML5 history 模式或 hash 模式：双模式支持，适配不同浏览器环境与部署需求

• 可定制的滚动行为：自定义页面切换后的滚动位置，优化全端用户体验

• 标准化 URL 编码：自动处理特殊字符编码，保证路由地址的兼容性与正确性

• 组合式 API 原生支持：Vue 3 专属特性，可在 setup 中直接使用路由钩子与 API

• 路由懒加载：基于 ES 模块动态导入，实现组件按需加载，优化项目首屏性能

• 导航故障处理：内置异常捕获机制，避免重复导航、路由错误导致程序崩溃

• 命名路由与命名视图：支持多视图并行渲染，满足复杂页面布局需求

快速开始

官方资源

官方文档包含完整 API 手册、最佳实践、迁移指南，是开发与调试的核心参考资料。

版本适配说明

Vue Router 4 仅支持 Vue 3 项目；Vue 2 项目需使用 Vue Router 3 版本，二者配置与 API 存在差异，开发时需严格匹配版本。

快速安装

通过包管理器一键安装最新版 Vue Router 4：

# npm 安装
npm install vue-router@4

# yarn 安装
yarn add vue-router@4

# pnpm 安装
pnpm add vue-router@4

工作流程

1. 定义路由组件：编写页面对应的 Vue 组件

2. 配置路由规则：建立路径与组件的一一映射关系

3. 创建路由实例：整合路由规则，配置路由模式、滚动行为等参数

4. 注册路由：将路由实例挂载到 Vue 3 根应用

5. 使用路由组件：通过 <router-link> 实现导航，<router-view> 渲染匹配组件

核心功能

路由模式

Vue Router 4 提供两种路由模式，可根据项目部署环境选择：

1. Hash 模式：默认模式，URL 携带 # 符号，兼容性最优，无需服务端配置

2. History 模式：基于 HTML5 history API，URL 简洁美观，生产环境需服务端配置重写规则

内置组件

1. <router-link>：替代原生 <a> 标签的路由导航组件，支持参数传递、激活样式、禁用状态等

2. <router-view>：路由匹配组件的渲染容器，支持嵌套使用，适配多级嵌套路由

嵌套路由

通过路由配置的 children 字段实现多级子路由，是后台管理系统、多层级页面的核心配置方式。

动态路由与参数

分为路径参数（/user/:id）和查询参数（/user?id=1），可通过路由 API 实时获取参数，驱动组件动态渲染数据。

导航守卫

三级路由拦截机制，常用于权限校验、页面跳转预处理、数据埋点：

• 全局守卫：对所有路由生效（beforeEach、afterEach）

• 路由独享守卫：仅对单个路由生效（beforeEnter）

• 组件内守卫：Vue 3 组合式 API 专属（onBeforeRouteLeave 等）

实用特性

• 路由重定向 & 别名：实现路径快捷跳转与别名映射

• 路由懒加载：按需加载组件，大幅减小打包体积

• 滚动行为定制：自定义页面切换后的滚动位置

• 路由元信息：通过 meta 字段配置路由权限、标题等自定义参数