约定式路由生成神器：vite-plugin-pages

3月

本文最后更新于2024年03月18日，已经过了248天没有更新，若内容或图片失效，请留言反馈

前言

去年我发布了一篇关于 约定式路由 的文章：

链接在 vite 中使用 glob 实现约定式路由什么是约定式路由？约定式路由也叫文件路由，就是不需要手写配置，文件系统即路 - 掘金

什么是约定式路由？约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。 Vue.js,Vite中文技术社区,前端开发社区,前端技术交流,前端框架教程,JavaScript 学习资源,CSS 技巧与最佳实践,HTML5 最新动态,前端工程师职业发展,开源前端项目,前端技术趋势

佚名

文章主要写了关于在 Vite 中使用 glob 根据文件系统自动生成路由，但看到有伙伴介绍这个目前有现成的 vite 插件：vite-plugin-pages

我一时就来了兴趣，搭建了个 vite 工程了解了下，真的可以，而且配置很简单，下面我来介绍一下这个插件的使用

安装插件

使用命令搭建一个 vue3 工程：
powershell 代码:
```
pnpm create vite vue3-demo -- --template vue-ts
```
安装 vue-router 和 vite-plugin-pages：
powershell 代码:
```
pnpm add vue-router

pnpm add vite-plugin-pages -D
```

配置插件

打开 vite.config.ts 文件，新增配置：

ts 代码:

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import pages from 'vite-plugin-pages'

 // https://vitejs.dev/config/
 export default defineConfig({
plugins: [
 vue(),
 pages({
   dirs: "src/views", // 需要生成路由的文件目录，默认就是识别src下面的pages文件
   exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由
   extendRoute(route, parent) {
     if (route.path === '/') {
       //给默认路由加一个redirect，默认为index.vue
       return {
         ...route,
         redirect: '/about'
       }
     }
   }
 }),
]
 })

配置 router/index.ts 路由文件：

ts 代码:

import {
  createRouter,
  createWebHistory
} from "vue-router";
import routes from "~pages";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

main.ts 中挂载路由：

ts 代码:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

文件系统即是路由

我们简单创建几个菜单文件：
我们在 router/index.ts 打印一下 routes ，会得到默认的路由配置，这时候我们就可以访问路由了：
如果我们想覆盖 route 配置，可以在文件中添加路由信息：
vue 代码:
```
<route>
 {
name:'new-about',
meta: {
 requiresAuth: false,
 layout:'top'
}
 }
</route>
```
里面的配置会直接覆盖默认配置，你也可以使用 yaml 格式：
yaml 代码:
```
<route lang="yaml">
name: new-about
meta:
  requiresAuth: true
  layout: top
</route>
```

配置动态路由，只需要用 [] 符号包裹：

txt 代码:

src/pages/users/[id].vue -> /users/:id (/users/one)
src/pages/[user]/settings.vue -> /:user/settings (/one/settings)

配置 404 拦截页面，在 src/views 目录下添加 [...all].vue：

路由生成规则

txt 代码:

src/views/index.vue -> /
src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由（children）
src/views/father/index.vue -> /father
src/views/father.vue -> /father
src/views/father/son.vue -> /father/son
src/views/father/[id].vue -> /father/:id
src/views/[father]/son.vue -> /:father/son
src/views/[…all].vue ->文件用来适配404页面

更多配置请参考：vite-plugin-pages