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

前言

去年我发布了一篇关于 约定式路由 的文章: 在 vite 中使用 glob 实现约定式路由

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

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

安装插件

  1. 使用命令搭建一个 vue3 工程:
powershell 复制代码
pnpm create vite vue3-demo -- --template vue-ts
  1. 安装 vue-routervite-plugin-pages
powershell 复制代码
pnpm add vue-router

pnpm add vite-plugin-pages -D

配置插件

  1. 打开 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'
           }
         }
       }
     }),
   ]
 })
  1. 配置 router/index.ts 路由文件:
ts 复制代码
import {
  createRouter,
  createWebHistory
} from "vue-router";
import routes from "~pages";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;
  1. 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')

文件系统即是路由

  1. 我们简单创建几个菜单文件:
  2. 我们在 router/index.ts 打印一下 routes ,会得到默认的路由配置,这时候我们就可以访问路由了:
  3. 如果我们想覆盖 route 配置,可以在文件中添加 <route> 路由信息:
vue 复制代码
<route>
 {
   name:'new-about',
   meta: {
     requiresAuth: false,
     layout:'top'
   }
 }
</route>

<route> 里面的配置会直接覆盖默认配置,你也可以使用 yaml 格式:

yaml 复制代码
<route lang="yaml">
name: new-about
meta:
  requiresAuth: true
  layout: top
</route>
  1. 配置动态路由,只需要用 [] 符号包裹:
txt 复制代码
src/pages/users/[id].vue -> /users/:id (/users/one)
src/pages/[user]/settings.vue -> /:user/settings (/one/settings)
  1. 配置 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

总结

个人感觉这个插件功能还是挺实用的,可以用在我们的项目上,就不用每次都要手写路由配置了,也更加容易维护。

不得不感叹现在前端开发的工具真的是越来越多了,也越来越实用,vite 还有很多实用的功能待我们去探索,这里给作者和 尤雨溪 老板一个赞👍🏻🫰

相关推荐
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js