哈嘍，大家好君旦！我是「勵(lì)志前端小黑哥」澎办，我?guī)е钚掳l(fā)布的文章又來(lái)了嘲碱！
專注前端領(lǐng)域10年+，專門分享那些沒(méi)用的前端知識(shí)局蚀！
今天要分享的內(nèi)容悍汛，是一段路由加載的函數(shù)代碼，這段代碼能自動(dòng)讀取目錄中的*.vue文件至会，并將他們自動(dòng)組裝成Vue3的路由离咐。
前言
在現(xiàn)代前端開(kāi)發(fā)中，單頁(yè)面應(yīng)用（SPA）已成為主流奉件，Vue.js作為一個(gè)輕量級(jí)且功能強(qiáng)大的前端框架宵蛀，被廣泛應(yīng)用于各種項(xiàng)目中。
在Vue3中县貌，Vue Router是其官方提供的路由管理器术陶，用于處理不同視圖之間的切換。在大型項(xiàng)目中煤痕，手動(dòng)定義所有路由可能會(huì)變得繁瑣且容易出錯(cuò)梧宫。
因此，編寫一個(gè)能夠根據(jù)文件結(jié)構(gòu)自動(dòng)生成路由的函數(shù)摆碉，可以極大地提高開(kāi)發(fā)效率塘匣。本文將分享一個(gè)這樣的函數(shù)，希望對(duì)你有所幫助巷帝。
需求分析
假設(shè)我們有這么一個(gè)目錄結(jié)構(gòu)
那我們的需求就是忌卤，將目錄結(jié)構(gòu)轉(zhuǎn)換為如下可訪問(wèn)的鏈接：
http://host/car
http://host/device
http://host/env
http://host/index
http://host/people
......
技術(shù)點(diǎn)
- Vue3 和 Vue Router：Vue3 提供了更強(qiáng)大的組合式 API，Vue Router 也進(jìn)行了相應(yīng)的更新楞泼，支持更好的類型檢查和模塊化管理驰徊。
-
文件遍歷：使用Vite的
import.meta.glob函數(shù)來(lái)遍歷項(xiàng)目目錄，獲取所有組件文件路徑堕阔。 - 動(dòng)態(tài)路由生成：根據(jù)獲取的文件路徑棍厂，動(dòng)態(tài)生成 Vue Router 的路由配置。
實(shí)現(xiàn)步驟
1. autoImportVueRouter函數(shù)的實(shí)現(xiàn)代碼
下面我在項(xiàng)目中使用的示例代碼超陆，用于根據(jù)指定目錄下的 Vue 組件文件自動(dòng)生成路由配置牺弹。
// file: autoImportVueRouter.ts
export default function autoImportVueRouter () : Array<VueRouter.RouteRecordRaw> {
// 加載views下的所有文件，注意：這里的路徑`@`
const views = import.meta.glob('@/views/**/**.vue')
// 標(biāo)識(shí)index.vue路徑是否存在
let indexExist = false
const subRouter: Array<VueRouter.RouteRecordRaw> = Object.keys(views).map(function (key:string) {
const component = views[key]
const path = key.toLowerCase().replace(/\.vue$/, '').replace(/.+\/views/g, '')
if (path === '/index') indexExist = true
return {
path,
component
}
})
// 標(biāo)識(shí)index.vue路徑必須存在侥猬，否則首頁(yè)不知道往跳轉(zhuǎn)
if (!indexExist) throw new Error('src/views目錄下必須存在Index.vue')
return subRouter
}
上面函數(shù)的關(guān)鍵代碼就是import.meta.glob('@/views/**/**.vue')例驹，它能從文件系統(tǒng)中導(dǎo)入多個(gè)模塊。
這里是該函數(shù)的介紹：https://vitejs.cn/vite5-cn/guide/features.html#glob-import
2. 該函數(shù)內(nèi)的注意點(diǎn)
另外需要注意的一個(gè)點(diǎn)退唠，是路徑'@/views/**/**.vue'中的@符號(hào)鹃锈，它需要在vite.config.ts中進(jìn)行別名的配置。如果使用ts瞧预，還需要在tsconfig.json中進(jìn)行配置屎债，這樣才能排除相對(duì)路徑對(duì)函數(shù)引用造成的影響仅政。比如，
import { defineConfig } from 'vite'
import * as path from 'node:path'
export default defineConfig({
resolve: {
alias: {
// 別名
'@': path.resolve(__dirname, 'src')
}
}
//...其他配置
})
3. 函數(shù)引用
在 Vue Router 配置文件中使用這個(gè)生成的路由：
import * as VueRouter from 'vue-router'
import autoImportVueRouter from './autoImportVueRouter'
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory('/'),
routes: [
// 首頁(yè)重定向盆驹，配合autoImportVueRouter函數(shù)內(nèi)的if判斷
{
path: '/',
redirect: '/index'
},
// 使用路由
...autoImportVueRouter(),
// 其他路由全部返回404
{
path: '/:pathMatch(.*)*',
redirect: '/404'
}
]
})
export default router;
至此圆丹，整個(gè)調(diào)用流程就實(shí)現(xiàn)了，后續(xù)無(wú)論新增/刪除了什么文件躯喇，再次打包構(gòu)建之后辫封，我們都不需要再去修改維護(hù)我們的路由模塊了。
對(duì)于大型項(xiàng)目廉丽，或者一部分懶人倦微，這個(gè)方式引入路由非常的方便！
舉一反三
通過(guò)vite的glob的多模塊導(dǎo)入功能正压，我們還可以做更多的事情欣福。比如，
- 全局組件自動(dòng)加載：與路由的差別只是將路由變成了組件焦履，然后利用組件的全局注冊(cè)功能拓劝，將組件自動(dòng)加載到項(xiàng)目中，方便其他各個(gè)頁(yè)面調(diào)用嘉裤。
- 批量導(dǎo)入多個(gè)圖片/資源：圖片或其他資源也可以類似操作郑临，然后在腳本中拿到它們，這在做圖片循環(huán)的時(shí)候也是比較常用的价脾。
- 項(xiàng)目所有內(nèi)容全部批量導(dǎo)入牧抵，構(gòu)造一個(gè)基于配置的項(xiàng)目架構(gòu)：無(wú)論圖片、模塊侨把、路由等，全部可以通過(guò)glob導(dǎo)入妹孙，這樣就可以根據(jù)自身項(xiàng)目情況來(lái)解析它們秋柄，將其抽離成配置文件后，就形成了一套固定的開(kāi)發(fā)流程蠢正。如果想要完全掌控項(xiàng)目骇笔，這么做是非常有必要的。
結(jié)語(yǔ)
通過(guò)上述方法嚣崭，我們可以實(shí)現(xiàn) Vue3 項(xiàng)目中根據(jù)文件路徑自動(dòng)生成路由的功能笨触，這不僅減少了手動(dòng)配置路由的工作量，還提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性雹舀。
希望這個(gè)函數(shù)能對(duì)你的 Vue3 項(xiàng)目開(kāi)發(fā)有所幫助芦劣，讓你在構(gòu)建大型單頁(yè)面應(yīng)用，或者組件的管理過(guò)程中说榆，更加得心應(yīng)手虚吟。
PS：文章看完了寸认，如果本文對(duì)你有所幫助，請(qǐng)點(diǎn)贊串慰、收藏偏塞，這樣能讓更多人知道！
勵(lì)志前端小黑哥邦鲫，全網(wǎng)唯一賬號(hào)灸叼！
關(guān)注我，帶你了解更多前端知識(shí)庆捺！
