您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么在vue中利用require.context動(dòng)態(tài)注冊(cè)路由,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
在日常的功能練習(xí)和調(diào)試過(guò)程中,需要一個(gè)demo項(xiàng)目進(jìn)行功能測(cè)試,由于頻繁.vue頁(yè)面的同時(shí),又要再router.js文件里面注冊(cè)路由,感覺有點(diǎn)無(wú)聊和枯燥?;诖顺霭l(fā)點(diǎn),考慮能否自動(dòng)讀取文件夾下的文件進(jìn)行路由注冊(cè)。
參考vue的功能基礎(chǔ)組件的自動(dòng)化全局注冊(cè),看到一個(gè)require.context方法,可以讀取某個(gè)文件夾下的文件信息。因此考慮,使用這個(gè)方法,獲取views文件夾下的.vue頁(yè)面,文件夾名稱作為路由名稱
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í)沒有想到好的方案)
心路歷程:
(1)一開始的想法,是想著用數(shù)組對(duì)象的方式定義好,路由名稱和引入的路徑地址,但是覺得還是不夠自動(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ǔ)法,因此在考慮,能否直接替換掉這種異步加載引入的寫法。經(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) // 查詢指定文件夾下的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
看完上述內(nèi)容,你們對(duì)怎么在vue中利用require.context動(dòng)態(tài)注冊(cè)路由有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。