在日常的功能練習(xí)和調(diào)試過(guò)程中，需要一個(gè)demo項(xiàng)目進(jìn)行功能測(cè)試，由于頻繁.vue頁(yè)面的同時(shí)，又要再router.js文件里面注冊(cè)路由，感覺(jué)有點(diǎn)無(wú)聊和枯燥。基于此出發(fā)點(diǎn)，考慮能否自動(dòng)讀取文件夾下的文件進(jìn)行路由注冊(cè)。

參考vue的功能基礎(chǔ)組件的自動(dòng)化全局注冊(cè)，看到一個(gè)require.context方法，可以讀取某個(gè)文件夾下的文件信息。因此考慮，使用這個(gè)方法，獲取views文件夾下的.vue頁(yè)面，文件夾名稱(chēng)作為路由名稱(chēng)

require.context的使用介紹：

一個(gè)webpack的api,通過(guò)執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,主要用來(lái)實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊,在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后自動(dòng)導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊

如下圖示，views文件夾下的內(nèi)容，都需要進(jìn)行路由注冊(cè)。

文件的路徑有2種，（1）簡(jiǎn)單的vue功能頁(yè)面，直接掛在views文件夾下；（2）復(fù)雜的頁(yè)面，在views下在新建文件夾進(jìn)行處理。

目前需要自動(dòng)注冊(cè)的路由頁(yè)面，是針對(duì)“直接掛在views文件夾”下的頁(yè)面。（因?yàn)関iews下的二級(jí)頁(yè)面，暫時(shí)沒(méi)有想到好的方案）

心路歷程：

（1）一開(kāi)始的想法，是想著用數(shù)組對(duì)象的方式定義好，路由名稱(chēng)和引入的路徑地址，但是覺(jué)得還是不夠自動(dòng)化，新建.vue文件的時(shí)候還是需要手動(dòng)添加；

（2）后來(lái)想到用使用require.context方法得到fileName，然后根據(jù)字符串裁減和拼接，得到我所需的url和文件相對(duì)路徑；

例如： component: () =>import(【變量】)，但是后來(lái)發(fā)現(xiàn)，import()里面，不能使用變量!!!!!!!!!

原因：根據(jù)es6module語(yǔ)法，由于import是靜態(tài)執(zhí)行，所以不能使用表達(dá)式和變量這些只有在運(yùn)行時(shí)才能得到結(jié)果的語(yǔ)法結(jié)構(gòu)。

（3）由由于import的使用限制，不能動(dòng)態(tài)使用() =>import的語(yǔ)法，因此在考慮，能否直接替換掉這種異步加載引入的寫(xiě)法。經(jīng)過(guò)分析，得出pathConfig字段里面有一個(gè)屬性的內(nèi)容，是指定的vue頁(yè)面的default模塊內(nèi)容。經(jīng)測(cè)試，可以使用。

pathConfig的打印內(nèi)容如下示：

（4）因此“views”文件夾下的'.vue'文件，引入成功，并用變量routerAry存儲(chǔ)起來(lái)，使用concat方法把其他需要手動(dòng)注冊(cè)的路由信息，連接起來(lái)，進(jìn)行路由注冊(cè)。

import Vue from ’vue’import VueRouter from ’vue-router’Vue.use(VueRouter)// 查詢(xún)指定文件夾下的vue頁(yè)面，自動(dòng)注冊(cè)路由// 僅適用于：一個(gè)文件夾下的多個(gè)路由頁(yè)面。用于簡(jiǎn)單的頁(yè)面的注冊(cè)// pathConfig.default的內(nèi)容，是指定的vue頁(yè)面的default模塊內(nèi)容，等同于: () => import(’xxxx’)const contextInfo = require.context(’../views’, false, /.vue$/);let routerAry = []contextInfo.keys().forEach(fileName => { const pathConfig = contextInfo(fileName) let path = '/' + fileName.substring(2,fileName.length-4) routerAry.push({ path, component: pathConfig.default })})const routerList = [ { path: '/', redirect: '/animate', }, { path: '/openlayers', component: () => import(’../views/openlayers/openlayers’) },{ path: '/render', component: () => import(’../views/render/render’) },{ path: ’/vuex’, component: () => import(’../views/vuex/vuex’) },{ path: '/echarts', component: () => import(’../views/echarts/echarts’) },{ path: '/ztree', component: () => import(’../views/ztree/ztree’) },{ path: '/ocxplayer', component: () => import(’../views/ocxplayer/ocxplayer’) },{ path: '/animation', component: () => import(’../views/animation/animation’) },]const newRouterAry = routerList.concat(routerAry)const router = new VueRouter({ routes: newRouterAry})export default router

以上就是vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的詳細(xì)內(nèi)容，更多關(guān)于vue 動(dòng)態(tài)注冊(cè)路由的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！