mcpskills.net — Curated AI Skills, MCPs & Agents

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)

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

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:

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

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

Templates Directory (`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

API Reference

Detailed API documentation is available in the api/ directory, organized to match the official Vue Router API documentation structure:

Router 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

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

Route record types and properties
Route configuration options

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

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

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

Navigation helper functions and utilities

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

RouterLink component props and usage
RouterView component props and usage

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

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

Error and Failure Types (`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

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

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

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

能力边界

✅ 适用场景

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

⚠️ 需要注意

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

❌ 不适用场景

不相关的技术栈或框架
需要完全自定义的特殊场景

常见陷阱 (Gotchas)

版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。