1.需求描述
在寫(xiě)vue的項(xiàng)目中,一般情況下我們每添加一個(gè)新頁(yè)面都得添加一個(gè)新路由。為此我們?cè)陧?xiàng)目中會(huì)專(zhuān)門(mén)的一個(gè)文件夾來(lái)管理路由,如下圖所示
那么有沒(méi)有一種方案,能夠?qū)崿F(xiàn)我們?cè)谖募A中新建了一個(gè)vue文件,就自動(dòng)幫我們添加路由。特別在我們的一個(gè)ERP后臺(tái)項(xiàng)目中,我們幾乎都是一個(gè)文件夾下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue
,分別對(duì)應(yīng)的事列表頁(yè),詳情頁(yè)和編輯頁(yè)。
上圖是我們的文件目錄,views文件夾中存放的是所有的頁(yè)面,goodsPlanning是一級(jí)目錄,onNewComplete和thirdGoods是二級(jí)目錄,二級(jí)目錄中存放的是具體的頁(yè)面,indexComponents中存放的是index.vue的文件,editComponents也是同樣的道理。index.vue對(duì)應(yīng)的路由是/goodsPlanning/onNewComplete
, edit.vue對(duì)應(yīng)的路由是/goodsPlanning/onNewComplete/edit
,detail.vue也是同樣的道理。所以我們的文件夾和路由是完全能夠?qū)?yīng)上的,只要知道路由,就能很快的找到對(duì)應(yīng)的文件。那么有沒(méi)有辦法能夠讀取我們二級(jí)目錄下的所有文件,然后根據(jù)文件名來(lái)生成路由呢?答案是有的
2. require.context介紹
官方文檔require.context
簡(jiǎn)單說(shuō)就是:有了require.context,我們可以得到指定文件夾下的所有文件
require.context(directory, useSubdirectories = false, regExp = /^/.///);
require.context有三個(gè)參數(shù):
require.context()的返回值,有一個(gè)keys方法,返回的是個(gè)數(shù)組
let routers = require.context('VIEWS', true).keys()console.log(routers)
通過(guò)上面的代碼,我們打印出了所有的views文件夾下的所有文件和文件夾,我們只要寫(xiě)好正則就能找到我們所需要的文件
3.直接上代碼
import Layout from 'VIEWS/layout/index'/** * 正則 首先匹配./ ,然后一級(jí)目錄,不包含components的二級(jí)目錄,以.vue結(jié)尾的三級(jí)目錄 */let routers = require.context('VIEWS', true, //.//[a-z]+//(?!components)[a-z]+//[a-z]+/.vue$/i).keys()let indexRouterMap = {} // 用來(lái)存儲(chǔ)以index.vue結(jié)尾的文件,因?yàn)閕ndex.vue是列表文件,需要加入layout(我們的菜單),需要keepAlive,需要做權(quán)限判斷l(xiāng)et detailRouterArr = [] // 用來(lái)存儲(chǔ)以非index.vue結(jié)尾的vue文件,此類(lèi)目前不需要layoutrouters.forEach(item => { const paths = item.match(/[a-zA-Z]+/g) //paths中存儲(chǔ)了一個(gè)目錄,二級(jí)目錄,文件名 const routerChild = { //定義路由對(duì)象 path: paths[1], name: `${paths[0]}${_.upperFirst(paths[1])}`, //upperFirst,lodash 首字母大寫(xiě)方法 component(resolve) { require([`../../views${item.slice(1)}`], resolve) }, } if (/index/.vue$/.test(item)) { //判斷是否以index。vue結(jié)尾 if (indexRouterMap[paths[0]]) { //判斷一級(jí)路由是否存在,存在push二級(jí)路由,不存在則新建 indexRouterMap[paths[0]].children.push(routerChild) } else { indexRouterMap[paths[0]] = { path: '/' + paths[0], component: Layout, children: [routerChild] } } } else { //不以index.vue結(jié)尾的,直接添加到路由中 detailRouterArr.push({ path: item.slice(1, -4), //渠道最前面的 . 和最后的.vue name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`, component(resolve) { require([`../../views${item.slice(1)}`], resolve) }, meta: { noCache: true, //不keepAlive noVerify: true //不做權(quán)限驗(yàn)證 } }) }})export default [ ...Object.values(indexRouterMap), ...detailRouterArr, /** * dashboard單獨(dú)處理下 */ { path: '', component: Layout, redirect: 'dashboard', children: [ { path: 'dashboard', component: () => import('VIEWS/dashboard/index'), name: 'dashboard', meta: { title: '首頁(yè)', noCache: true, noVerify: true } } ] },]
簡(jiǎn)簡(jiǎn)單單的幾十行代碼就實(shí)現(xiàn)了所有的路由功能,再也不用一行一行的寫(xiě)路由文件了??赡苣愕奈募芾矸绞胶臀业牟灰粯樱侵灰晕⒏母恼齽t就行了。
4. 注意
5.好處
總結(jié)
以上所述是小編給大家介紹的vue 自動(dòng)化路由實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注