CodeBuddy 通过 CLI + 明确 Prompt 生成框架特定路由配置，需指定 Vue/React/Next.js 类型及路径、守卫、懒加载等细节，支持多版本共存与 TypeScript 集成验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
CodeBuddy 本身不直接写死前端路由代码，而是通过 CLI 工具 + 明确 Prompt 驱动生成符合项目框架规范的路由配置。关键在于“告诉它你要什么”，而不是等它自动猜。
明确框架类型再生成
Vue、React、Next.js 的路由结构完全不同，生成前必须指定。比如：
- Vue 3 + Vue Router 4：要声明
createRouter、createWebHistory、路由数组格式（含path、component、meta） - React Router v6：需生成
createBrowserRouter或嵌套路由元素（<Route path=...>） - Next.js App Router：强调文件系统路由（
app/xxx/page.tsx），不写 JS 路由配置
错误示例：“生成前端路由”——没说框架，生成结果大概率不可用。正确写法：“生成 Vue 3.4 + Vue Router 4 的路由配置，包含 /login、/dashboard、/user/:id 三个路由，其中 dashboard 设为默认重定向，user 页面需守卫校验登录状态”。
支持动态路由与权限控制
CodeBuddy 能把常见逻辑一并生成，不只是静态路径：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
-
参数路由：如
/post/:slug，Prompt 中写明“slug 为字符串，需在组件内通过useRoute().params.slug获取” - 路由守卫：例如“/admin/* 所有子路由需检查 localStorage 中 token 是否存在，不存在则跳转 /login”
- 懒加载：注明“所有页面组件使用 defineAsyncComponent 或 import() 动态导入，避免首屏过大”
生成后代码会自带 meta 字段和 beforeEach 全局守卫逻辑，不用手动补。
多版本路由共存（v1/v2）
适用于 API 版本升级但前端也要兼容旧版界面的场景：
- Prompt 示例：“生成 Vue Router 路由配置，支持 /v1/settings 和 /v2/settings 共存；v1 使用 SettingsV1.vue，v2 使用 SettingsV2.vue；两个路由都挂载在根路由下，互不干扰”
- 生成结果中会明确区分组件路径，并可选添加
alias或redirect，比如把/settings默认指向 v2 - 若需 URL 参数控制版本（如
/settings?version=v1），需额外说明“根据 query.version 动态加载组件”，CLI 会注入对应逻辑
集成到项目中的实操步骤
生成不是终点，落地才有用：
- 执行命令：
codebuddy "生成 Vue Router 路由" < prompt.txt，输出保存为src/router/index.ts - 确认
main.ts中已引入并 use(router)，且 router 实例导出命名一致（如 default export） - 若用了 TypeScript，检查生成的组件路径是否带
.vue后缀、是否匹配@/views/别名，必要时微调路径 - 启动项目后访问对应路径，验证是否 404；打开浏览器 DevTools → Vue Devtools → Router 标签页，看路由表是否完整加载
