Vue Router 4 完全指南：Vue 3 路由配置、导航守卫与高级功能详解

 * 动态路由匹配 → `examples/essentials/dynamic-route-matching.md`
 * 路由匹配语法 → `examples/essentials/routes-matching-syntax.md`
 * 命名路由 → `examples/essentials/named-routes.md`
 * 嵌套路由 → `examples/essentials/nested-routes.md`
 * 编程式导航 → `examples/essentials/programmatic-navigation.md`
 * 命名视图 → `examples/essentials/named-views.md`
 * 重定向和别名 → `examples/essentials/redirect-alias.md`
 * 向路由组件传递 props → `examples/essentials/passing-props.md`
 * 不同的历史模式 → `examples/essentials/different-history-modes.md`
 * 导航守卫 → `examples/advanced/navigation-guards.md`
 * 路由元信息 → `examples/advanced/route-meta-fields.md`
 * 数据获取 → `examples/advanced/data-fetching.md`
 * 组合式 API → `examples/advanced/composition-api.md`
 * RouterView 插槽 → `examples/advanced/routerview-slot.md`
 * 过渡效果 → `examples/advanced/transitions.md`
 * 滚动行为 → `examples/advanced/scroll-behavior.md`
 * 懒加载路由 → `examples/advanced/lazy-loading-routes.md`
 * 类型化路由 → `examples/advanced/typed-routes.md`
 * 扩展 RouterLink → `examples/advanced/extending-router-link.md`
 * 导航失败 → `examples/advanced/navigation-failures.md`
 * 动态路由 → `examples/advanced/dynamic-routing.md`

2. 从 examples/ 目录加载相应的示例文件：

基础 - examples/essentials/:

 * `examples/essentials/getting-started.md` \- 创建路由器和基本设置
 * `examples/essentials/dynamic-route-matching.md` \- 带参数的动态路由匹配
 * `examples/essentials/routes-matching-syntax.md` \- 路由匹配语法和模式
 * `examples/essentials/named-routes.md` \- 命名路由和导航
 * `examples/essentials/nested-routes.md` \- 嵌套路由和 RouterView
 * `examples/essentials/programmatic-navigation.md` \- 使用路由器方法进行编程式导航
 * `examples/essentials/named-views.md` \- 命名视图和多个 RouterView
 * `examples/essentials/redirect-alias.md` \- 重定向和别名
 * `examples/essentials/passing-props.md` \- 向路由组件传递 props
 * `examples/essentials/different-history-modes.md` \- Hash、HTML5 history 和 memory 模式

高级 - examples/advanced/:

 * `examples/advanced/navigation-guards.md` \- 全局、路由独享和组件内守卫
 * `examples/advanced/route-meta-fields.md` \- 路由元信息和自定义数据
 * `examples/advanced/data-fetching.md` \- 数据获取策略
 * `examples/advanced/composition-api.md` \- 在组合式 API 中使用 `useRouter()` 和 `useRoute()`
 * `examples/advanced/routerview-slot.md` \- RouterView 插槽属性
 * `examples/advanced/transitions.md` \- 路由过渡和动画
 * `examples/advanced/scroll-behavior.md` \- 滚动行为配置
 * `examples/advanced/lazy-loading-routes.md` \- 懒加载路由和代码分割
 * `examples/advanced/typed-routes.md` \- TypeScript 类型化路由
 * `examples/advanced/extending-router-link.md` \- 扩展 RouterLink 组件
 * `examples/advanced/navigation-failures.md` \- 处理导航失败
 * `examples/advanced/dynamic-routing.md` \- 动态添加和删除路由

3. 遵循该示例文件中关于语法、结构和最佳实践的特定说明

重要提示 :

 * 所有示例均遵循 Vue Router 4 API
 * 示例在适用时包含 JavaScript 和 TypeScript 版本
 * 每个示例文件都包含关键概念、代码示例和要点
 * 始终检查示例文件以了解最佳实践和常见模式

4. 需要时参考 api/ 目录中的 API 文档：

 * `api/router.md` \- 路由器实例 API (`createRouter`, `addRoute`, `removeRoute` 等)
 * `api/route-records.md` \- 路由记录类型和属性
 * `api/useRouter-useRoute.md` \- 组合式 API 函数 (`useRouter`, `useRoute`)
 * `api/navigation-helpers.md` \- 导航辅助函数
 * `api/router-link-router-view-components.md` \- RouterLink 和 RouterView 组件
 * `api/history-modes-api.md` \- 历史模式 API
 * `api/error-and-failure-types.md` \- 错误和失败类型

5. 使用 templates/ 目录中的模板：

 * `templates/router-setup.md` \- 路由器设置模板
 * `templates/route-config.md` \- 路由配置模板

示例和模板

此技能包含详细的示例，其组织结构与 Vue Router 官方文档结构 (https://router.vuejs.org/guide/, https://router.vuejs.org/api/) 相匹配。所有示例都在 examples/ 目录中，按主题组织：

基础 - examples/essentials/

• examples/essentials/getting-started.md - 创建路由器、安装 Vue Router 和基本设置
• examples/essentials/dynamic-route-matching.md - 带参数和查询的动态路由匹配
• examples/essentials/routes-matching-syntax.md - 路由匹配语法、通配符路由和正则表达式
• examples/essentials/named-routes.md - 命名路由和使用名称导航
• examples/essentials/nested-routes.md - 嵌套路由和嵌套 RouterView
• examples/essentials/programmatic-navigation.md - 使用 router.push()、router.replace()、router.go() 进行编程式导航
• examples/essentials/named-views.md - 命名视图和多个 RouterView 组件
• examples/essentials/redirect-alias.md - 重定向和别名配置
• examples/essentials/passing-props.md - 向路由组件传递 props
• examples/essentials/different-history-modes.md - Hash 模式、HTML5 history 模式和 memory 模式

高级 - examples/advanced/

• examples/advanced/navigation-guards.md - 全局守卫、路由独享守卫和组件内守卫
• examples/advanced/route-meta-fields.md - 路由元信息和在守卫中访问元信息
• examples/advanced/data-fetching.md - 数据获取策略（导航前、导航后）
• examples/advanced/composition-api.md - 在组合式 API 中使用 useRouter() 和 useRoute()
• examples/advanced/routerview-slot.md - RouterView 插槽属性和自定义渲染
• examples/advanced/transitions.md - 路由过渡和动画
• examples/advanced/scroll-behavior.md - 滚动行为配置
• examples/advanced/lazy-loading-routes.md - 懒加载路由和代码分割
• examples/advanced/typed-routes.md - TypeScript 类型化路由和类型安全
• examples/advanced/extending-router-link.md - 扩展 RouterLink 组件
• examples/advanced/navigation-failures.md - 处理导航失败和错误
• examples/advanced/dynamic-routing.md - 在运行时动态添加和删除路由

模板目录 (templates/)

• templates/router-setup.md - 适用于不同场景的路由器设置模板
• templates/route-config.md - 路由配置模板

使用示例的方法：

• 从用户的请求中识别主题
• 从相应目录加载适当的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据您的具体用例调整代码示例

使用模板的方法：

• 参考 templates/router-setup.md 获取路由器设置模板
• 使用 templates/route-config.md 获取路由配置模板
• 根据您的具体需求和编码风格调整模板

API 参考

详细的 API 文档可在 api/ 目录中找到，其组织结构与官方 Vue Router API 文档结构相匹配：

路由器 API (api/router.md)

• createRouter() - 创建路由器实例
• 路由器实例方法：addRoute()、removeRoute()、hasRoute()、getRoutes()、push()、replace()、go()、back()、forward()
• 路由器实例属性：currentRoute、options

路由记录 API (api/route-records.md)

• 路由记录类型和属性
• 路由配置选项

组合式 API (api/useRouter-useRoute.md)

• useRouter() - 在 setup 中访问路由器实例
• useRoute() - 在 setup 中访问当前路由

导航辅助函数 (api/navigation-helpers.md)

• 导航辅助函数和工具

组件 API (api/router-link-router-view-components.md)

• RouterLink 组件属性和用法
• RouterView 组件属性和用法

历史模式 API (api/history-modes-api.md)

• createWebHistory() - HTML5 history 模式
• createWebHashHistory() - Hash 模式
• createMemoryHistory() - Memory 模式

错误和失败类型 (api/error-and-failure-types.md)

• 导航失败类型
• 错误处理

使用 API 参考的方法：

1. 确定您需要帮助的 API
2. 从 api/ 目录加载相应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接的示例文件以获取详细的使用模式
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 使用命名路由：使用命名路由以提高可维护性和重构能力
2. 懒加载路由：对路由组件使用动态导入以实现代码分割
3. 类型安全：将 TypeScript 与类型化路由结合使用以获得更好的类型安全
4. 导航守卫：适当使用导航守卫（全局、路由独享、组件内）
5. 路由元信息：使用路由元信息字段存储自定义数据和权限
6. 历史模式：根据部署环境选择合适的历史模式
7. 滚动行为：配置滚动行为以提升用户体验
8. 错误处理：优雅地处理导航失败

资源

• 官方指南：https://router.vuejs.org/guide/
• API 参考：https://router.vuejs.org/api/
• 迁移指南：https://router.vuejs.org/guide/migration/
• GitHub 仓库：https://github.com/vuejs/router

关键词

Vue Router, router, routing, navigation, route, routes, nested routes, named routes, dynamic routes, route params, route query, navigation guards, route meta, programmatic navigation, RouterLink, RouterView, useRouter, useRoute, history mode, hash mode, HTML5 history, lazy loading, code splitting, typed routes, TypeScript, 路由, 导航, 路由守卫, 嵌套路由, 命名路由, 动态路由, 编程式导航, 懒加载, 类型化路由

每周安装量

55

仓库

teachingai/full…k-skills

GitHub Stars

223

首次出现

2026年1月24日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装在

gemini-cli43

codex42

opencode42

github-copilot39

claude-code38

cursor38