使用 Vite 和 Vue Router 实现模块化路由

在使用 Vue 3 和 Vite 开发大型项目时，管理路由配置可能会变得复杂。为了简化路由管理，我们可以将路由配置拆分成多个模块。本文将介绍如何使用 Vite 的动态导入功能和 Vue Router 实现模块化路由，并对比这种方法与单文件路由配置的优点。

前言

在大型项目中，路由配置通常会变得非常庞大和难以维护。将路由配置拆分成多个模块有助于提高可维护性和代码的可读性。Vite 提供了 import.meta.glob 功能，可以方便地实现动态导入多个模块。

项目结构

假设我们的项目结构如下：

src/
├── router/
│   ├── index.ts
│   └── modules/
│       ├── home.ts
│       ├── about.ts
│       └── contact.ts
├── views/
│   ├── Home.vue
│   ├── About.vue
│   └── Contact.vue
└── main.ts

其中，modules 目录下的每个文件都包含了部分路由配置。

实现动态导入模块

首先，我们在 router/index.ts 文件中使用 Vite 的 import.meta.glob 功能来动态导入 modules 目录下的所有路由配置模块。

import { createRouter, createWebHistory, RouteRecordNormalized } from 'vue-router'

// 动态导入 modules 目录下的所有 .ts 文件
const modules = import.meta.glob('./modules/*.ts', { eager: true })

// 格式化导入的模块
function formatModules(_modules: any, result: RouteRecordNormalized[]) {
  Object.keys(_modules).forEach((key) => {
    const defaultModule = _modules[key].default
    if (!defaultModule) return
    const moduleList = Array.isArray(defaultModule)
      ? [...defaultModule]
      : [defaultModule]
    result.push(...moduleList)
  })
  return result
}

// 导出格式化后的路由数组
export const appRoutes: RouteRecordNormalized[] = formatModules(modules, [])

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

export default router

模块化路由配置

接下来，我们在 modules 目录下创建各个路由模块。例如，在 modules/home.ts 文件中配置 Home 路由：

import { RouteRecordRaw } from 'vue-router'

const homeRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
]

export default homeRoutes

同样地，我们可以为其他页面创建相应的路由模块，例如 modules/about.ts 和 modules/contact.ts。

对比与优点

单文件路由配置

在单文件路由配置中，所有路由都集中在一个文件中，一旦项目庞大就会有超过数百行代码，难以维护。例如：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Contact from '@/views/Contact.vue'
...

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
  ...
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

模块化路由配置的优点

代码可维护性：将路由配置拆分到多个文件中，使得每个文件的内容更少、更专注，便于维护和阅读。
团队协作：在团队协作中，不同的开发者可以同时对不同的路由模块进行修改，减少了合并冲突的可能性。
按需加载：通过动态导入，可以实现路由模块的按需加载，减少初始加载时间。
更好的结构：模块化的路由配置有助于更清晰地组织项目结构，使得代码更具逻辑性。

总结

使用 Vite 的动态导入