Vue Vite 文件路由系统

一个基于 Vite 的 Vue3 文件路由系统，利用 import.meta.glob 实现自动路由生成。

特性

• 📁 基于文件系统的路由
• 🔄 支持嵌套路由
• 🔗 支持动态路由参数
• 🎛️ 支持可选参数
• 🏗️ 支持布局系统
• 🚀 支持路由懒加载

安装

pnpm add vue-vite-file-router

使用方法

基本用法

// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import { createFileRouter } from 'vue-vite-file-router'

// 创建文件路由系统
const fileRouter = createFileRouter({
  dir: 'src/pages',
  layoutsDir: 'src/layouts',
  enableLayouts: true
})

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: fileRouter.routes
})

// 创建应用实例
const app = createApp(App)

// 使用路由
app.use(router)

// 挂载应用
app.mount('#app')

作为 Vite 插件使用

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteFileRouter from 'vue-vite-file-router'

export default defineConfig({
  plugins: [
    vue(),
    viteFileRouter({
      dir: 'src/pages',
      layoutsDir: 'src/layouts'
    })
  ]
})

路由规则

文件路由系统会根据文件路径自动生成路由配置：

• pages/index.vue → /
• pages/about.vue → /about
• pages/users/index.vue → /users
• pages/users/[id].vue → /users/:id
• pages/users/[[name]].vue → /users/:name?

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | dir | string | 'src/pages' | 路由文件所在的目录 | | extensions | string[] | ['.vue', '.tsx', '.jsx'] | 路由文件的扩展名 | | deep | boolean | true | 是否深度扫描子目录 | | prefix | string | '' | 路由前缀 | | routeProcessor | Function | (route) => route | 自定义路由处理函数 | | lazyLoad | boolean | true | 是否启用动态导入（懒加载） | | enableIndex | boolean | true | 是否启用索引路由（index.vue 映射到父路径） | | enableDynamicRoutes | boolean | true | 是否启用动态路由（[id].vue 映射到 :id） | | enableOptionalRoutes | boolean | true | 是否启用可选参数路由（[[id]].vue 映射到 :id?） | | enableLayouts | boolean | true | 是否启用布局系统 | | layoutsDir | string | 'src/layouts' | 布局文件所在的目录 | | defaultLayout | string | 'default' | 默认布局名称 |

布局系统

布局系统允许你为不同的路由定义不同的布局：

1. 在 layouts 目录中创建布局文件，例如 default.vue：

<template>
  <div class="layout">
    <header>
      <h1>我的应用</h1>
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link>
      </nav>
    </header>
    
    <main>
      <router-view />
    </main>
    
    <footer>
      <p>© 2025 我的应用</p>
    </footer>
  </div>
</template>

2. 启用布局系统：

const fileRouter = createFileRouter({
  dir: 'src/pages',
  layoutsDir: 'src/layouts',
  enableLayouts: true,
  defaultLayout: 'default'
})

示例

查看 src/example 目录中的示例应用，了解如何使用文件路由系统。

开发

# 安装依赖
pnpm install

# 运行示例应用
pnpm dev

# 构建库
pnpm build:lib

# 运行测试
pnpm test

许可证

MIT