vue-router-v4

何时使用此技能

在用户希望执行以下操作时使用此技能：

• 在 Vue 3 应用中设置路由
• 配置路由、嵌套路由和命名路由
• 实现导航守卫（全局、每个路由、组件内）
• 使用 router.push()、router.replace() 等进行编程式导航
• 处理动态路由匹配和路由参数
• 使用路由元字段和路由记录
• 为路由实现懒加载和代码分割
• 在组合式 API 中使用 Vue Router（useRouter、useRoute）
• 配置不同的历史模式（哈希、HTML5 历史记录、内存）
• 处理滚动行为和过渡效果
• 使用 TypeScript 实现类型化路由
• 从 Vue Router 3 迁移到 Vue Router 4
• 扩展 RouterLink 组件
• 处理导航失败和错误
• 使用动态路由（在运行时添加或移除路由）

如何使用此技能

此技能的组织结构与 Vue Router 官方文档的结构一致（https://router.vuejs.org/guide/、https://router.vuejs.org/api/）。使用 Vue Router 时：

1. 根据用户的请求确定主题：

   • 入门/快速开始 → 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
   • 编程式导航/编程式导航 → examples/essentials/programmatic-navigation.md
   • 命名视图/命名视图 → examples/essentials/named-views.md
   • 重定向和别名/重定向和别名 → examples/essentials/redirect-alias.md
   • 向路由组件传递 props/向路由组件传递 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/组合式 API → examples/advanced/composition-api.md
   • RouterView 插槽/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/扩展 RouterLink → examples/advanced/extending-router-link.md
   • 导航失败/导航失败 → examples/advanced/navigation-failures.md
   • 动态路由/动态路由 → examples/advanced/dynamic-routing.md

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

   基础（Essentials）- 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 - 哈希、HTML5 历史记录和内存模式 高级 - examples/advanced/：
   • examples/advanced/navigation-guards.md - 全局、按路由和组件内守卫
   • examples/advanced/route-meta-fields.md - 路由元字段和自定义数据
   • examples/advanced/data-fetching.md - 数据获取策略
   • examples/advanced/composition-api.md - 在 Composition 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 - Router 实例 API（createRouter、addRoute、removeRoute 等）
   • api/route-records.md - 路由记录类型和属性
   • api/useRouter-useRoute.md - Composition 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 - Router 设置模板
   • templates/route-config.md - 路由配置模板

示例和模板

此技能包含详细示例，组织结构与 Vue Router 官方文档（https://router.vuejs.org/guide/、https://router.vuejs.org/api/）保持一致。所有示例均位于 examples/ 目录中，并按主题分类：

基础 - examples/essentials/

• examples/essentials/getting-started.md - 创建 Router、安装 Vue Router 和基础设置
• examples/essentials/dynamic-route-matching.md - 使用 params 和 query 进行动态路由匹配
• 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 历史模式和内存模式

高级 - examples/advanced/

• examples/advanced/navigation-guards.md - 全局守卫、路由独享守卫和组件内守卫
• examples/advanced/route-meta-fields.md - 路由 meta 字段以及在守卫中访问 meta
• examples/advanced/data-fetching.md - 数据获取策略（导航前、导航后）
• examples/advanced/composition-api.md - 在 Composition 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 文档一致：

Router API（api/router.md）

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

路由记录 API（api/route-records.md）

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

Composition 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 历史模式
• createWebHashHistory() - Hash 模式
• createMemoryHistory() - 内存模式

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

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

使用 API 参考：

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

最佳实践

1. 使用具名路由：使用具名路由，以便更好地维护和重构
2. 路由懒加载：使用动态导入加载路由组件，以实现代码分割
3. 类型安全：使用 TypeScript 和类型化路由，以获得更好的类型安全
4. 导航守卫：恰当使用导航守卫（全局、路由独享、组件内）
5. 路由 meta：使用路由 meta 字段存储自定义数据和权限信息
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、路由器、路由、导航、路由、路由、嵌套路由、命名路由、动态路由、路由参数、路由查询、导航守卫、路由元信息、编程式导航、RouterLink、RouterView、useRouter、useRoute、历史模式、哈希模式、HTML5 历史记录、懒加载、代码拆分、类型化路由、TypeScript、路由、导航、路由守卫、嵌套路由、命名路由、动态路由、编程式导航、懒加载、类型化路由