约定式路由生成神器: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 还有很多实用的功能待我们去探索,这里给作者和 尤雨溪 老板一个赞👍🏻🫰

相关推荐
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
做梦都在学习前端3 小时前
发布一个monaco-editor 汉化包
前端·npm·vite
炒毛豆4 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端小盆友4 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
阳火锅4 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水5 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了5 小时前
实现一个简单的Vue响应式
前端·vue.js
Cacciatore->5 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~5 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末6 小时前
React——基础
前端·react.js·前端框架