Vue3》》Vite》》文件路由 vite-plugin-pages、布局系统 vite-plugin-vue-layouts

文件路由

vite-plugin-pages 是一个用于在 Vite 项目中自动生成路由的插件。它可以根据文件系统的结构自动生成 Vue Router 的路由配置，极大地提高了开发效率。

案例

安装 vite-plugin-pages、vue-router
npm i vue-router vite-plugin-pages

//src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'// 自动生成的路由配置
//或 import routes from 'virtual:generated-pages';
import routes from "~pages";
// 如果需要扩展路由元信息，可以使用 vite-plugin-vue-layouts
const router = createRouter({history: createWebHistory(),routes,
})router.beforeEach(v=>{console.log(v)
})
export default router

//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入路由文件
import Page from 'vite-plugin-pages'
export default defineConfig({//配置路径别名resolve: {alias: {"@": resolve(__dirname, 'src')}},plugins: [vue(),/** 自带 api 的自动化导入 */AutoImport({// 自动导入 vue、vue-router、Pinia 相关函数imports: ['vue', 'pinia', 'vue-router']   }),/** 组件及其类型的自动化导入 */Components({resolvers:[ElementPlusResolver()],// 自动导入 src/components 目录下的自定义组件dirs: ['src/components'],}),//文件路由Page({dirs: "src/pages", // 需要生成路由的文件目录，默认就是识别src下面的pages文件exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由})],server: {port: 4000,open: true}
})

Pages({dirs: [{ dir: 'src/pages', baseRoute: '' }, // 主应用，baseRoute 为空字符串表示根路径{ dir: 'src/features/admin/pages', baseRoute: 'admin' }, // 管理后台{ dir: 'src/features/user/pages', baseRoute: 'user' }, // 用户中心{ dir: 'src/features/billing/pages', baseRoute: 'billing' }, // 支付账单]
})

//app.vue
<script setup lang="ts"></script><template><router-view/>
</template><style scoped></style>

动态路由

带路由元信息

布局系统 vite-plugin-vue-layouts

安装 vite-plugin-vue-layouts
npm i vite-plugin-vue-layouts

》》vite.config.ts

//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 路由文件
import Page from 'vite-plugin-pages'
//布局
import Layouts from 'vite-plugin-vue-layouts'
export default defineConfig({//配置路径别名resolve: {alias: {"@": resolve(__dirname, 'src')}},plugins: [vue(),/** 自带 api 的自动化导入 */AutoImport({// 自动导入 vue、vue-router、Pinia 相关函数imports: ['vue', 'pinia', 'vue-router']   }),/** 组件及其类型的自动化导入 */Components({resolvers:[ElementPlusResolver()],// 自动导入 src/components 目录下的自定义组件dirs: ['src/components'],}),//文件路由Page({dirs: "src/pages", // 需要生成路由的文件目录，默认就是识别src下面的pages文件exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由}),Layouts({layoutsDirs: 'src/layouts', // 布局文件目录pagesDirs: 'src/pages',defaultLayout: 'default' // 默认布局（对应 src/layouts/default.vue）})],server: {port: 4000,open: true}
})

》》布局文件


》》》如果部使用默认 布局

// src/pages/about
<template><div>about</div>
</template>
<route>
{meta:{layout:'Cust'}
}</route>