麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁(yè) > 編程 > JavaScript > 正文

vue 自動(dòng)化路由實(shí)現(xiàn)代碼

2019-11-19 10:54:16
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

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ù):

  • directory:說(shuō)明需要檢索的目錄
  • useSubdirectories:是否檢索子目錄
  • regExp: 匹配文件的正則表達(dá)式

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. 注意

  1. 不能用import引入路由,因?yàn)橛胕mport引入不支持變量
  2. 不能用別名,找了半天問(wèn)題,才知道用變量時(shí)也不能用別名,所以我用的都是相對(duì)路徑

5.好處

  • 不用在添加路由了,這個(gè)就不說(shuō)了,明眼人都看得出來(lái)
  • 知道了路由,一個(gè)能找到對(duì)應(yīng)的文件,以前我們團(tuán)隊(duì)就出現(xiàn)過(guò),亂寫(xiě)path的情況
  • 更好的控制驗(yàn)證和keepAlive

總結(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)注明出處,謝謝!

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 91成人午夜性a一级毛片 | 美女wc| 成人免费看视频 | www久久综合 | 久久久久久久国产a∨ | 久久久一二三 | h视频在线播放 | 欧美精品久久久久久久久久 | 久久3| 国产老师做www爽爽爽视频 | 特一级黄色毛片 | 久久精品日产第一区二区三区 | 一区二区三区在线观看av | 青青青在线免费 | 在线播放av片| 色就操 | 素人视频免费观看 | 欧美日韩一区,二区,三区,久久精品 | 日本在线高清 | 亚洲成人久久精品 | av电影院在线观看 | 麻豆一二区 | 久久在线免费视频 | 国产青草视频在线观看视频 | 午夜视频色 | 亚洲aⅴ免费在线观看 | 99精品无人区乱码在线观看 | 国产免费一区二区三区最新不卡 | 综合99 | 日本高清黄色片 | 羞羞网站在线看 | 欧美精品一区二区三区久久久 | 国产精品91在线 | 日本道中文字幕 | 国产成人高清成人av片在线看 | 高清做爰免费无遮网站挡 | 九九热免费在线观看 | 久久夜夜视频 | 国产精品久久久久久久久久iiiii | 欧日韩在线视频 | 黄色毛片视频在线观看 |