您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何在vue實現(xiàn)自動化路由,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
1.需求描述
在寫vue的項目中,一般情況下我們每添加一個新頁面都得添加一個新路由。為此我們在項目中會專門的一個文件夾來管理路由,如下圖所示
那么有沒有一種方案,能夠?qū)崿F(xiàn)我們在文件夾中新建了一個vue文件,就自動幫我們添加路由。特別在我們的一個ERP后臺項目中,我們幾乎都是一個文件夾下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue
,分別對應(yīng)的事列表頁,詳情頁和編輯頁。
上圖是我們的文件目錄,views文件夾中存放的是所有的頁面,goodsPlanning是一級目錄,onNewComplete和thirdGoods是二級目錄,二級目錄中存放的是具體的頁面,indexComponents中存放的是index.vue的文件,editComponents也是同樣的道理。index.vue對應(yīng)的路由是/goodsPlanning/onNewComplete
, edit.vue對應(yīng)的路由是/goodsPlanning/onNewComplete/edit
,detail.vue也是同樣的道理。所以我們的文件夾和路由是完全能夠?qū)?yīng)上的,只要知道路由,就能很快的找到對應(yīng)的文件。那么有沒有辦法能夠讀取我們二級目錄下的所有文件,然后根據(jù)文件名來生成路由呢?答案是有的
2. require.context介紹
官方文檔require.context
簡單說就是:有了require.context,我們可以得到指定文件夾下的所有文件
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
require.context有三個參數(shù):
directory:說明需要檢索的目錄
useSubdirectories:是否檢索子目錄
regExp: 匹配文件的正則表達(dá)式
require.context()的返回值,有一個keys方法,返回的是個數(shù)組
let routers = require.context('VIEWS', true).keys() console.log(routers)
通過上面的代碼,我們打印出了所有的views文件夾下的所有文件和文件夾,我們只要寫好正則就能找到我們所需要的文件
3.直接上代碼
import Layout from 'VIEWS/layout/index' /** * 正則 首先匹配./ ,然后一級目錄,不包含components的二級目錄,以.vue結(jié)尾的三級目錄 */ let routers = require.context('VIEWS', true, /\.\/[a-z]+\/(?!components)[a-z]+\/[a-z]+\.vue$/i).keys() let indexRouterMap = {} // 用來存儲以index.vue結(jié)尾的文件,因為index.vue是列表文件,需要加入layout(我們的菜單),需要keepAlive,需要做權(quán)限判斷 let detailRouterArr = [] // 用來存儲以非index.vue結(jié)尾的vue文件,此類目前不需要layout routers.forEach(item => { const paths = item.match(/[a-zA-Z]+/g) //paths中存儲了一個目錄,二級目錄,文件名 const routerChild = { //定義路由對象 path: paths[1], name: `${paths[0]}${_.upperFirst(paths[1])}`, //upperFirst,lodash 首字母大寫方法 component(resolve) { require([`../../views${item.slice(1)}`], resolve) }, } if (/index\.vue$/.test(item)) { //判斷是否以index。vue結(jié)尾 if (indexRouterMap[paths[0]]) { //判斷一級路由是否存在,存在push二級路由,不存在則新建 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)限驗證 } }) } }) export default [ ...Object.values(indexRouterMap), ...detailRouterArr, /** * dashboard單獨處理下 */ { path: '', component: Layout, redirect: 'dashboard', children: [ { path: 'dashboard', component: () => import('VIEWS/dashboard/index'), name: 'dashboard', meta: { title: '首頁', noCache: true, noVerify: true } } ] }, ]
簡簡單單的幾十行代碼就實現(xiàn)了所有的路由功能,再也不用一行一行的寫路由文件了??赡苣愕奈募芾矸绞胶臀业牟灰粯樱侵灰晕⒏母恼齽t就行了。
4. 注意
不能用import引入路由,因為用import引入不支持變量
不能用別名,找了半天問題,才知道用變量時也不能用別名,所以我用的都是相對路徑
5.好處
不用在添加路由了,這個就不說了,明眼人都看得出來
知道了路由,一個能找到對應(yīng)的文件,以前我們團(tuán)隊就出現(xiàn)過,亂寫path的情況
更好的控制驗證和keepAlive
關(guān)于如何在vue實現(xiàn)自動化路由就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。