mcpField
V
vue-router

vue-router

github.com/full-stack-skills开发3225 次安装5 周前更新
代码仓库

关于 vue-router

为 Vue 项目提供 Vue Router 路由配置与最佳实践参考的技能，适用于使用 Vue 3 或 Vue 2 的开发者。内容涵盖路由、导航守卫、动态路由和懒加载。

主要功能

  1. 01配置路由与 history 模式
  2. 02使用 router-link 和 router-view
  3. 03设置动态路由与嵌套路由
  4. 04通过守卫集中处理权限
  5. 05按需懒加载页面组件

适用场景

  1. 01为 Vue 项目添加路由
  2. 02根据用户权限控制页面访问
  3. 03将大型页面改为按需加载

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/vue-skills --skill vue-router

安装后在 Claude Code 中输入/vue-router确认已加载。

附带文件agents/openai.yamlLICENSE.txt

README 原文English

来自项目 README

README 暂无中文译文，以下为英文原文；中文介绍见上方。

When 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

  1. 配置：createRouter、routes、history 模式；router-link、router-view、useRouter。
  2. 进阶：动态路由、嵌套路由、beforeEach 守卫、meta；懒加载 component: () => import()。
  3. 参考：https://router.vuejs.org/

Best Practices

  • 路由与权限在守卫中集中处理；大页面懒加载。
  • 命名路由与 params/query 规范；避免在路由中存敏感数据。

Keywords

vue router, 路由, 守卫, Vue 3, Vue 2

评论

支持 Markdown