关于 vue-router
面向 Vue.js 单页应用开发者的 Vue Router 技能，涵盖路由配置、导航及进阶路由模式，包括类型化路由和导航守卫。
主要功能
- 01嵌套路由与动态路由
- 02路由参数、查询与命名路由
- 03导航方法与导航守卫
- 04历史模式与滚动行为
- 05类型化路由与懒加载
适用场景
- 01配置 Vue.js 单页应用路由
- 02添加受守卫控制或运行时定义的路由
- 03设置路由过渡和滚动行为
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue-router确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/advanced-composition-api.mdadvanced-dynamic-routing.mdadvanced-lazy-loading.mdadvanced-meta.mdadvanced-navigation-failures.mdadvanced-navigation-guards.mdadvanced-router-view-slot.mdadvanced-scroll-behavior.mdadvanced-transitions.mdadvanced-typed-routes.mdcore-navigation.mdcore-router-setup.mdcore-router-view-link.mdessentials-active-links.mdessentials-dynamic-matching.mdessentials-history-mode.mdessentials-named-routes.mdessentials-named-views.mdessentials-nested-routes.mdessentials-passing-props.mdessentials-redirect-alias.mdessentials-route-matching-syntax.md详细介绍
Vue Router
该技能基于 Vue Router v5.0.1，生成于 2026-01-31。
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让使用 Vue.js 构建单页应用变得轻而易举。功能包括嵌套路由映射、动态路由、模块化且基于组件的路由配置、路由参数、查询、通配符、视图过渡效果、细粒度的导航控制、自动激活 CSS 类的链接、HTML5 history 模式或 hash 模式、可自定义的滚动行为，以及 URL 的正确编码。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 路由设置 | 创建路由实例、注册插件、访问 router/route | core-router-setup |
| 导航 | 使用 push、replace、go 方法进行编程式导航 | core-navigation |
| RouterView 与 RouterLink | 用于渲染路由和创建导航链接的组件 | core-router-view-link |
基础
路由配置
| 主题 | 描述 | 参考 |
|---|---|---|
| 动态匹配 | 带参数的动态路由片段、访问 route.params | essentials-dynamic-matching |
| 嵌套路由 | 使用 children 选项的嵌套路由配置 | essentials-nested-routes |
| 命名路由 | 无需硬编码 URL 即可导航的命名路由 | essentials-named-routes |
| 命名视图 | 用于复杂布局的多个 RouterView 组件 | essentials-named-views |
| History 模式 | HTML5 history、hash 模式、memory 模式、服务器配置 | 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 |
| 导航失败 | 检测中止/取消/重复的导航 | advanced-navigation-failures |
组合式与 TypeScript
| 主题 | 描述 | 参考 |
|---|---|---|
| 组合式 API | useRouter、useRoute、导航守卫、useLink | advanced-composition-api |
| 类型化路由 | 用于自动补全和类型安全的 TypeScript 类型化路由 | advanced-typed-routes |
高级功能
| 主题 | 描述 | 参考 |
|---|---|---|
| 过渡 | 使用 RouterView 插槽进行路由过渡 | advanced-transitions |
| 滚动行为 | 导航时的自定义滚动行为 | advanced-scroll-behavior |
| Meta 字段 | 用于自定义数据的路由 meta 字段 | advanced-meta |
| 懒加载 | 使用动态导入懒加载路由组件 | advanced-lazy-loading |
| 动态路由 | 在运行时添加和移除路由 | advanced-dynamic-routing |
| RouterView 插槽 | 用于自定义渲染的高级 RouterView 插槽 API | advanced-router-view-slot |
评论
支持 Markdown