About vue-router
A reference skill for configuring Vue Router in Vue projects, for developers using Vue 3 or Vue 2. It covers routes, navigation guards, dynamic routes, and lazy loading.
Key features
- 01Configures routes and history modes
- 02Uses router-link and router-view
- 03Sets up dynamic and nested routes
- 04Centralizes access control in guards
- 05Lazy-loads page components
Use cases
- 01Add routing to a Vue project
- 02Restrict page access based on permissions
- 03Load large pages on demand
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/vue-routerin Claude Code to confirm it loaded.
Bundled filesagents/openai.yamlLICENSE.txt
Details
From the project READMEWhen to use this skill
Use this skill whenever the user wants to:
- 在 Vue 项目中配置路由、动态路由、守卫与懒加载
- 使用 Vue Router 4（Vue 3）或 3.x（Vue 2）API
How to use this skill
- 配置：createRouter、routes、history 模式；router-link、router-view、useRouter。
- 进阶：动态路由、嵌套路由、beforeEach 守卫、meta；懒加载 component: () => import()。
- 参考：https://router.vuejs.org/
Best Practices
- 路由与权限在守卫中集中处理；大页面懒加载。
- 命名路由与 params/query 规范；避免在路由中存敏感数据。
Keywords
vue router, 路由, 守卫, Vue 3, Vue 2
Comments
Markdown supported