vue-router
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseVue Router
Vue Router
The skill is based on Vue Router v5.0.1, generated at 2026-01-31.
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes mapping, dynamic routing, modular component-based router configuration, route params, query, wildcards, view transition effects, fine-grained navigation control, links with automatic active CSS classes, HTML5 history mode or hash mode, customizable scroll behavior, and proper encoding for URLs.
本技能基于Vue Router v5.0.1，生成于2026年1月31日。
Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让使用Vue.js构建单页应用（Single Page Applications）变得轻而易举。其功能包括嵌套路由映射、动态路由、基于组件的模块化路由配置、路由参数、查询、通配符、视图过渡效果、细粒度导航控制、带有自动激活CSS类的链接、HTML5历史模式或哈希模式、可自定义的滚动行为以及URL的正确编码。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Router Setup | Create router instance, register plugin, access router/route | core-router-setup |
| Navigation | Programmatic navigation with push, replace, go methods | core-navigation |
| RouterView & RouterLink | Components for rendering routes and creating navigation links | core-router-view-link |
| 主题 | 描述 | 参考 |
|---|---|---|
| 路由设置 | 创建路由实例、注册插件、访问router/route | core-router-setup |
| 导航 | 使用push、replace、go方法进行编程式导航 | core-navigation |
| RouterView与RouterLink | 用于渲染路由和创建导航链接的组件 | core-router-view-link |
Essentials
基础内容
Route Configuration
路由配置
| Topic | Description | Reference |
|---|---|---|
| Dynamic Matching | Dynamic route segments with params, accessing route.params | essentials-dynamic-matching |
| Nested Routes | Nested route configuration with children option | essentials-nested-routes |
| Named Routes | Named routes for navigation without hardcoded URLs | essentials-named-routes |
| Named Views | Multiple RouterView components for complex layouts | essentials-named-views |
| History Mode | HTML5 history, hash mode, memory mode, server configuration | essentials-history-mode |
| Route Matching Syntax | Custom regex, repeatable params, optional params | essentials-route-matching-syntax |
| Active Links | Active link CSS classes, router-link-active vs exact-active | essentials-active-links |
| Passing Props | Pass route params as component props | essentials-passing-props |
| Redirect & Alias | Route redirects and aliases for URL mapping | essentials-redirect-alias |
| 主题 | 描述 | 参考 |
|---|---|---|
| 动态匹配 | 带有参数的动态路由片段，访问route.params | essentials-dynamic-matching |
| 嵌套路由 | 使用children选项配置嵌套路由 | essentials-nested-routes |
| 命名路由 | 用于导航的命名路由，无需硬编码URL | essentials-named-routes |
| 命名视图 | 用于复杂布局的多个RouterView组件 | essentials-named-views |
| 历史模式 | HTML5历史模式、哈希模式、内存模式、服务器配置 | essentials-history-mode |
| 路由匹配语法 | 自定义正则表达式、可重复参数、可选参数 | essentials-route-matching-syntax |
| 激活链接 | 激活链接的CSS类，router-link-active与exact-active的区别 | essentials-active-links |
| 传递Props | 将路由参数作为组件Props传递 | essentials-passing-props |
| 重定向与别名 | 用于URL映射的路由重定向和别名 | essentials-redirect-alias |
Advanced
进阶内容
Navigation & Guards
导航与守卫
| Topic | Description | Reference |
|---|---|---|
| Navigation Guards | Global guards, per-route guards, in-component guards | advanced-navigation-guards |
| Navigation Failures | Detecting aborted/cancelled/duplicated navigations | advanced-navigation-failures |
| 主题 | 描述 | 参考 |
|---|---|---|
| 导航守卫 | 全局守卫、路由专属守卫、组件内守卫 | advanced-navigation-guards |
| 导航失败 | 检测中止/取消/重复的导航 | advanced-navigation-failures |
Composition & TypeScript
组合式API与TypeScript
| Topic | Description | Reference |
|---|---|---|
| Composition API | useRouter, useRoute, navigation guards, useLink | advanced-composition-api |
| Typed Routes | TypeScript typed routes for autocomplete and type safety | advanced-typed-routes |
| 主题 | 描述 | 参考 |
|---|---|---|
| 组合式API | useRouter、useRoute、导航守卫、useLink | advanced-composition-api |
| 类型化路由 | 用于自动补全和类型安全的TypeScript类型化路由 | advanced-typed-routes |
Advanced Features
进阶功能
| Topic | Description | Reference |
|---|---|---|
| Transitions | Route transitions using RouterView slot | advanced-transitions |
| Scroll Behavior | Custom scroll behavior on navigation | advanced-scroll-behavior |
| Meta Fields | Route meta fields for custom data | advanced-meta |
| Lazy Loading | Lazy loading route components with dynamic imports | advanced-lazy-loading |
| Dynamic Routing | Adding and removing routes at runtime | advanced-dynamic-routing |
| RouterView Slot | Advanced RouterView slot API for custom rendering | advanced-router-view-slot |
| 主题 | 描述 | 参考 |
|---|---|---|
| 过渡效果 | 使用RouterView插槽实现路由过渡 | advanced-transitions |
| 滚动行为 | 导航时的自定义滚动行为 | advanced-scroll-behavior |
| 元字段 | 用于自定义数据的路由元字段 | advanced-meta |
| 懒加载 | 使用动态导入懒加载路由组件 | advanced-lazy-loading |
| 动态路由 | 在运行时添加和移除路由 | advanced-dynamic-routing |
| RouterView插槽 | 用于自定义渲染的进阶RouterView插槽API | advanced-router-view-slot |