在 vite 中推荐使用 unplugin-vue-router 自动生成路由表，它支持类型安全、自动导入和官方工具链深度集成；默认扫描 src/pages 目录，按文件路径生成对应路由，动态路由和嵌套路由均原生支持。
在 Vite 环境下自动生成路由表，核心是借助约定式路由插件，把文件系统结构直接映射为路由配置，省去手动维护 routes 数组的繁琐过程。主流方案有 vite-plugin-pages 和 unplugin-vue-router，两者都成熟稳定，适配 Vue 3 + Vue Router 4，配置简洁、支持动态路由和元信息扩展。
选一个插件并安装依赖
推荐优先使用 unplugin-vue-router：它生成类型安全的路由、支持自动导入、与 Vue 官方工具链集成更紧密；vite-plugin-pages 更轻量，适合快速上手。
- 安装
unplugin-vue-router（含 Vue Router）：pnpm add -D unplugin-vue-routerpnpm add vue-router - 确保项目已初始化为 Vue 3（如未创建，可用
pnpm create vite@latest my-app -- --template vue-ts）
配置插件并启用自动路由
修改 vite.config.ts，注意 unplugin-vue-router 必须放在 vue() 插件之前：
import { defineConfig } from 'vite'
import VueRouter from 'unplugin-vue-router/vite'
import vue from '@vitejs/plugin-vue'
<p>export default defineConfig({
plugins: [
VueRouter({}), // ✅ 必须在 vue() 之前
vue(),
],
})
</p>
插件默认扫描 src/pages 目录，无需额外配置路径即可生效。
按约定组织页面文件
在 src/pages 下创建文件，命名即路由路径：
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
src/pages/index.vue→ 路由/ -
src/pages/about.vue→ 路由/about -
src/pages/users/[id].vue→ 动态路由/users/:id（useRoute().params.id可取值） -
src/pages/[...all].vue→ 兜底路由（如 404 页面），匹配所有未定义路径
嵌套路由也自然支持：比如 src/pages/dashboard/index.vue 对应 /dashboard，其子页 src/pages/dashboard/settings.vue 对应 /dashboard/settings。
创建并挂载路由实例
新建 src/router/index.ts：
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes' // ✅ 自动生成的路由数组
<p>const router = createRouter({
history: createWebHistory(),
routes,
})</p><p>export default router
</p>
然后在 main.ts 中使用：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
<p>createApp(App).use(router).mount('#app')
</p>
<routerview></routerview> 和 <routerlink></routerlink> 已全局注册，可直接在模板中使用。
不复杂但容易忽略：插件会在开发时实时生成 vue-router/auto-routes 模块，无需手动运行命令；首次启动或新增页面后，热更新会自动刷新路由配置。你只需专注写页面文件，剩下的交给插件。
