⚡

VueRouterv4路由管理技能Skill vue-router-v4

Vue Router v4 是一个用于 Vue 3 应用程序的前端路由管理库，提供路由配置、导航守卫、动态路由匹配、懒加载和代码分割等功能。适用于构建单页应用，支持 TypeScript 类型化路由和组合式 API。关键词：Vue Router v4, 前端开发, 路由管理, Vue 3, 导航守卫, 动态路由, 懒加载, TypeScript, SEO 搜索。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

名称: vue-router-v4 描述: 提供Vue Router v4的全面指导，包括路由配置、导航、嵌套路由、路由守卫和Vue 3集成。当用户询问Vue Router v4、需要为Vue 3应用程序设置路由、实现导航守卫或使用Vue Router v4功能时使用。 许可证: 完整条款见LICENSE.txt

何时使用此技能

每当用户想要：

  • 在Vue 3应用程序中设置路由
  • 配置路由、嵌套路由和命名路由
  • 实现导航守卫（全局、每路由、组件内）
  • 使用程序化导航，如router.push()、router.replace()等
  • 处理动态路由匹配和路由参数
  • 使用路由元字段和路由记录
  • 实现路由的懒加载和代码分割
  • 使用Vue Router与组合式API（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 → 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 - 哈希、HTML5历史和内存模式

    高级 - 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插槽props
    • 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 - 哈希模式、HTML5历史模式和内存模式

高级 - 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插槽props和自定义渲染
  • 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组件props和用法
  • RouterView组件props和用法

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

  • createWebHistory() - HTML5历史模式
  • createWebHashHistory() - 哈希模式
  • 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. 路由元：使用路由元字段存储自定义数据和权限
  6. 历史模式：根据部署环境选择适当的历史模式
  7. 滚动行为：配置滚动行为以改善用户体验
  8. 错误处理：优雅地处理导航失败

资源

关键词

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, 路由, 导航, 路由守卫, 嵌套路由, 命名路由, 动态路由, 编程式导航, 懒加载, 类型化路由