# 使用vite-plugin-pages生成约定式路由
https://github.com/hannoeru/vite-plugin-pages
// vite.config.ts
import Pages from 'vite-plugin-pages'
export default defineConfig(({ mode }) => {
return {
plugins: [
Pages({
dirs: 'src/app/pages'
}),
]
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
router.ts
import addonRoutes from '~pages'
addonRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route))
1
2
2
如果是React
import addonRoutes from '~react-pages'
const routes = [
...addonRoutes
]
const router = createBrowserRouter(routes, { basename: '/app' })
const Router = () => <RouterProvider router={router} />
1
2
3
4
5
6
7
2
3
4
5
6
7
声明类型
// vite-plugin-pages.d.ts
declare module '~react-pages' {
import { RouteObject } from 'react-router-dom'
const routes: RouteObject[]
export default routes
}
1
2
3
4
5
6
2
3
4
5
6
# 生成嵌套路由
目录结构如下图所示，其中left.tsx中需要有Outlet
具体可以看：https://github.com/hannoeru/vite-plugin-pages?tab=readme-ov-file#nested-routes
