vue-router-v4

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Set up routing in a Vue 3 application
Configure routes, nested routes, and named routes
Implement navigation guards (global, per-route, in-component)
Use programmatic navigation with
```
router.push()
```
,
```
router.replace()
```
, etc.
Handle dynamic route matching and route parameters
Work with route meta fields and route records
Implement lazy loading and code splitting for routes
Use Vue Router with Composition API (
```
useRouter
```
,
```
useRoute
```
)
Configure different history modes (hash, HTML5 history, memory)
Handle scroll behavior and transitions
Implement typed routes with TypeScript
Migrate from Vue Router 3 to Vue Router 4
Extend RouterLink component
Handle navigation failures and errors
Work with dynamic routing (adding/removing routes at runtime)

当用户有以下需求时，可使用本技能：

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

How to use this skill

如何使用本技能

This skill is organized to match the Vue Router official documentation structure (https://router.vuejs.org/guide/, https://router.vuejs.org/api/). When working with Vue Router:

Identify the topic from the user's request:
- Getting started/快速开始 →
```
examples/essentials/getting-started.md
```
- Dynamic route matching/动态路由匹配 →
```
examples/essentials/dynamic-route-matching.md
```
- Routes matching syntax/路由匹配语法 →
```
examples/essentials/routes-matching-syntax.md
```
- Named routes/命名路由 →
```
examples/essentials/named-routes.md
```
- Nested routes/嵌套路由 →
```
examples/essentials/nested-routes.md
```
- Programmatic navigation/编程式导航 →
```
examples/essentials/programmatic-navigation.md
```
- Named views/命名视图 →
```
examples/essentials/named-views.md
```
- Redirect and alias/重定向和别名 →
```
examples/essentials/redirect-alias.md
```
- Passing props to route components/向路由组件传递 props →
```
examples/essentials/passing-props.md
```
- Different history modes/不同的历史模式 →
```
examples/essentials/different-history-modes.md
```
- Navigation guards/导航守卫 →
```
examples/advanced/navigation-guards.md
```
- Route meta fields/路由元信息 →
```
examples/advanced/route-meta-fields.md
```
- Data fetching/数据获取 →
```
examples/advanced/data-fetching.md
```
- Composition API/组合式 API →
```
examples/advanced/composition-api.md
```
- RouterView slot/RouterView 插槽 →
```
examples/advanced/routerview-slot.md
```
- Transitions/过渡效果 →
```
examples/advanced/transitions.md
```
- Scroll behavior/滚动行为 →
```
examples/advanced/scroll-behavior.md
```
- Lazy loading routes/懒加载路由 →
```
examples/advanced/lazy-loading-routes.md
```
- Typed routes/类型化路由 →
```
examples/advanced/typed-routes.md
```
- Extending RouterLink/扩展 RouterLink →
```
examples/advanced/extending-router-link.md
```
- Navigation failures/导航失败 →
```
examples/advanced/navigation-failures.md
```
- Dynamic routing/动态路由 →
```
examples/advanced/dynamic-routing.md
```

Load the appropriate example file from the

examples/

directory:

Essentials (基础) -
examples/essentials/
:

```
examples/essentials/getting-started.md
```
- Creating a router and basic setup

examples/essentials/dynamic-route-matching.md

- Dynamic route matching with params

examples/essentials/routes-matching-syntax.md

- Route matching syntax and patterns

```
examples/essentials/named-routes.md
```
- Named routes and navigation
```
examples/essentials/nested-routes.md
```
- Nested routes and RouterView

examples/essentials/programmatic-navigation.md

- Programmatic navigation with router methods

```
examples/essentials/named-views.md
```
- Named views and multiple RouterView
```
examples/essentials/redirect-alias.md
```
- Redirects and aliases
```
examples/essentials/passing-props.md
```
- Passing props to route components

examples/essentials/different-history-modes.md

- Hash, HTML5 history, and memory modes

Advanced (高级) -
examples/advanced/
:

```
examples/advanced/navigation-guards.md
```
- Global, per-route, and in-component guards
```
examples/advanced/route-meta-fields.md
```
- Route meta fields and custom data
```
examples/advanced/data-fetching.md
```
- Data fetching strategies

examples/advanced/composition-api.md

- Using

useRouter()

and

useRoute()

with Composition API

```
examples/advanced/routerview-slot.md
```
- RouterView slot props
```
examples/advanced/transitions.md
```
- Route transitions and animations
```
examples/advanced/scroll-behavior.md
```
- Scroll behavior configuration

examples/advanced/lazy-loading-routes.md

- Lazy loading routes and code splitting

```
examples/advanced/typed-routes.md
```
- TypeScript typed routes

examples/advanced/extending-router-link.md

- Extending RouterLink component

examples/advanced/navigation-failures.md

- Handling navigation failures

```
examples/advanced/dynamic-routing.md
```
- Adding and removing routes dynamically

Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- All examples follow Vue Router 4 API
- Examples include both JavaScript and TypeScript versions where applicable
- Each example file includes key concepts, code examples, and key points
- Always check the example file for best practices and common patterns
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/router.md
```
  - Router instance API (
```
createRouter
```
  ,
```
addRoute
```
  ,
```
removeRoute
```
  , etc.)
- ```
api/route-records.md
```
  - Route record types and properties
- ```
api/useRouter-useRoute.md
```
  - Composition API functions (
```
useRouter
```
  ,
```
useRoute
```
  )
- ```
api/navigation-helpers.md
```
  - Navigation helper functions
- ```
api/router-link-router-view-components.md
```
  - RouterLink and RouterView components
- ```
api/history-modes-api.md
```
  - History mode APIs
- ```
api/error-and-failure-types.md
```
  - Error and failure types
Use templates from the
```
templates/
```
directory:
- ```
templates/router-setup.md
```
  - Router setup templates
- ```
templates/route-config.md
```
  - Route configuration templates

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

从用户的请求中确定主题：

快速开始 →
```
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
```

从
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

- 在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
```
- 动态添加和移除路由

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要说明:
- 所有示例均遵循Vue Router 4 API
- 适用的示例包含JavaScript和TypeScript两种版本
- 每个示例文件包含核心概念、代码示例和关键点
- 请务必查看示例文件中的最佳实践和通用模式

必要时参考
api/
目录中的API文档:

api/router.md

- 路由实例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
```
- 错误与失败类型

使用
templates/
目录中的模板:
- ```
templates/router-setup.md
```
  - 路由配置模板
- ```
templates/route-config.md
```
  - 路由规则配置模板

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the Vue Router official documentation structure (https://router.vuejs.org/guide/, https://router.vuejs.org/api/). All examples are in the

examples/

directory, organized by topic:

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

Essentials (基础) -

examples/essentials/

基础部分 -

examples/essentials/

```
examples/essentials/getting-started.md
```
- Creating a router, installing Vue Router, and basic setup
```
examples/essentials/dynamic-route-matching.md
```
- Dynamic route matching with params and query
```
examples/essentials/routes-matching-syntax.md
```
- Route matching syntax, catch-all routes, and regex
```
examples/essentials/named-routes.md
```
- Named routes and navigation with names
```
examples/essentials/nested-routes.md
```
- Nested routes and nested RouterView

examples/essentials/programmatic-navigation.md

- Programmatic navigation with

router.push()

router.replace()

router.go()

```
examples/essentials/named-views.md
```
- Named views and multiple RouterView components
```
examples/essentials/redirect-alias.md
```
- Redirects and aliases configuration
```
examples/essentials/passing-props.md
```
- Passing props to route components
```
examples/essentials/different-history-modes.md
```
- Hash mode, HTML5 history mode, and memory mode

```
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模式

Advanced (高级) -

examples/advanced/

高级部分 -

examples/advanced/

```
examples/advanced/navigation-guards.md
```
- Global guards, per-route guards, and in-component guards
```
examples/advanced/route-meta-fields.md
```
- Route meta fields and accessing meta in guards
```
examples/advanced/data-fetching.md
```
- Data fetching strategies (before navigation, after navigation)

examples/advanced/composition-api.md

- Using

useRouter()

and

useRoute()

with Composition API

```
examples/advanced/routerview-slot.md
```
- RouterView slot props and custom rendering
```
examples/advanced/transitions.md
```
- Route transitions and animations
```
examples/advanced/scroll-behavior.md
```
- Scroll behavior configuration

examples/advanced/lazy-loading-routes.md

- Lazy loading routes and code splitting

```
examples/advanced/typed-routes.md
```
- TypeScript typed routes and type safety

examples/advanced/extending-router-link.md

- Extending RouterLink component

```
examples/advanced/navigation-failures.md
```
- Handling navigation failures and errors
```
examples/advanced/dynamic-routing.md
```
- Adding and removing routes dynamically at runtime

```
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
```
- 运行时动态添加和移除路由

Templates Directory (

templates/

)

模板目录 (

templates/

)

```
templates/router-setup.md
```
- Router setup templates for different scenarios
```
templates/route-config.md
```
- Route configuration templates

To use examples:

Identify the topic from the user's request
Load the appropriate example file from the corresponding directory
Follow the instructions, syntax, and best practices in that file
Adapt the code examples to your specific use case

To use templates:

Reference
```
templates/router-setup.md
```
for router setup templates
Use
```
templates/route-config.md
```
for route configuration templates
Adapt templates to your specific needs and coding style

```
templates/router-setup.md
```
- 不同场景下的路由配置模板
```
templates/route-config.md
```
- 路由规则配置模板

使用示例的方法:

从用户请求中确定主题
从对应目录加载合适的示例文件
遵循文件中的说明、语法和最佳实践
根据具体用例调整代码示例

使用模板的方法:

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

API Reference

API参考

Detailed API documentation is available in the

api/

directory, organized to match the official Vue Router API documentation structure:

详细的API文档位于

api/

目录，组织结构与Vue Router官方API文档一致：

Router API (

api/router.md

)

路由API (

api/router.md

)

```
createRouter()
```
- Creating a router instance

Router instance methods:

addRoute()

removeRoute()

hasRoute()

getRoutes()

push()

replace()

go()

back()

forward()

Router instance properties:
```
currentRoute
```
,
```
options
```

```
createRouter()
```
- 创建路由实例

路由实例方法：

addRoute()

、

removeRoute()

、

hasRoute()

、

getRoutes()

、

push()

、

replace()

、

go()

、

back()

、

forward()

路由实例属性：
```
currentRoute
```
、
```
options
```

Route Records API (

api/route-records.md

)

路由记录API (

api/route-records.md

)

Route record types and properties
Route configuration options

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

Composition API (

api/useRouter-useRoute.md

)

Composition API (

api/useRouter-useRoute.md

)

```
useRouter()
```
- Access router instance in setup
```
useRoute()
```
- Access current route in setup

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

Navigation Helpers (

api/navigation-helpers.md

)

导航辅助函数 (

api/navigation-helpers.md

)

Navigation helper functions and utilities

导航辅助函数与工具

Components API (

api/router-link-router-view-components.md

)

组件API (

api/router-link-router-view-components.md

)

```
RouterLink
```
component props and usage
```
RouterView
```
component props and usage

```
RouterLink
```
组件的属性与用法
```
RouterView
```
组件的属性与用法

History Modes API (

api/history-modes-api.md

)

历史模式API (

api/history-modes-api.md

)

```
createWebHistory()
```
- HTML5 history mode
```
createWebHashHistory()
```
- Hash mode
```
createMemoryHistory()
```
- Memory mode

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

Error and Failure Types (

api/error-and-failure-types.md

)

错误与失败类型 (

api/error-and-failure-types.md

)

Navigation failure types
Error handling

To use API reference:

Identify the API you need help with
Load the corresponding API file from the
```
api/
```
directory
Find the API signature, parameters, return type, and examples
Reference the linked example files for detailed usage patterns
All API files include links to relevant example files in the
```
examples/
```
directory

导航失败类型
错误处理

使用API参考的方法:

确定需要查询的API
从
```
api/
```
目录加载对应的API文件
查找API签名、参数、返回类型和示例
参考关联的示例文件获取详细用法
所有API文件均包含指向
```
examples/
```
目录中相关示例文件的链接

Best Practices

最佳实践

Use named routes: Use named routes for better maintainability and refactoring
Lazy load routes: Use dynamic imports for route components to enable code splitting
Type safety: Use TypeScript with typed routes for better type safety
Navigation guards: Use navigation guards appropriately (global, per-route, in-component)
Route meta: Use route meta fields for custom data and permissions
History mode: Choose the appropriate history mode based on deployment environment
Scroll behavior: Configure scroll behavior for better UX
Error handling: Handle navigation failures gracefully

使用命名路由：使用命名路由提升可维护性和重构效率
路由懒加载：对路由组件使用动态导入实现代码分割
类型安全：结合TypeScript和类型化路由提升类型安全
合理使用导航守卫：根据场景选择全局、单路由或组件内导航守卫
路由元信息：使用路由元字段存储自定义数据和权限信息
选择合适的历史模式：根据部署环境选择对应的历史模式
配置滚动行为：配置滚动行为提升用户体验
错误处理：优雅处理导航失败

Resources

资源

Official Guide: https://router.vuejs.org/guide/
API Reference: https://router.vuejs.org/api/
Migration Guide: https://router.vuejs.org/guide/migration/
GitHub Repository: https://github.com/vuejs/router

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

Keywords

关键词

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

vue-router-v4

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

Examples and Templates

示例与模板

Essentials (基础) -
`examples/essentials/`

基础部分 -
`examples/essentials/`

Advanced (高级) -
`examples/advanced/`

高级部分 -
`examples/advanced/`

Templates Directory (
`templates/`
)

模板目录 (
`templates/`
)

API Reference

API参考

Router API (
`api/router.md`
)

路由API (
`api/router.md`
)

Route Records API (
`api/route-records.md`
)

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

Composition API (
`api/useRouter-useRoute.md`
)

Composition API (
`api/useRouter-useRoute.md`
)

Navigation Helpers (
`api/navigation-helpers.md`
)

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

Components API (
`api/router-link-router-view-components.md`
)

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

History Modes API (
`api/history-modes-api.md`
)

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

Error and Failure Types (
`api/error-and-failure-types.md`
)

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

Best Practices

最佳实践

Resources

资源

Keywords

关键词

vue-router-v4

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

Examples and Templates

示例与模板

Essentials (基础) - examples/essentials/

基础部分 - examples/essentials/

Advanced (高级) - examples/advanced/

高级部分 - examples/advanced/

Templates Directory (templates/)

模板目录 (templates/)

API Reference

API参考

Router API (api/router.md)

路由API (api/router.md)

Route Records API (api/route-records.md)

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

Composition API (api/useRouter-useRoute.md)

Composition API (api/useRouter-useRoute.md)

Navigation Helpers (api/navigation-helpers.md)

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

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

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

History Modes API (api/history-modes-api.md)

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

Error and Failure Types (api/error-and-failure-types.md)

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

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Essentials (基础) -
`examples/essentials/`

基础部分 -
`examples/essentials/`

Advanced (高级) -
`examples/advanced/`

高级部分 -
`examples/advanced/`

Templates Directory (
`templates/`
)

模板目录 (
`templates/`
)

Router API (
`api/router.md`
)

路由API (
`api/router.md`
)

Route Records API (
`api/route-records.md`
)

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

Composition API (
`api/useRouter-useRoute.md`
)

Composition API (
`api/useRouter-useRoute.md`
)

Navigation Helpers (
`api/navigation-helpers.md`
)

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

Components API (
`api/router-link-router-view-components.md`
)

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

History Modes API (
`api/history-modes-api.md`
)

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

Error and Failure Types (
`api/error-and-failure-types.md`
)

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