這篇文章將為大家詳細(xì)講解有關(guān)如何在vue實(shí)現(xiàn)自動(dòng)化路由，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都紗窗小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站設(shè)計(jì)營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

1.需求描述

在寫vue的項(xiàng)目中，一般情況下我們每添加一個(gè)新頁面都得添加一個(gè)新路由。為此我們?cè)陧?xiàng)目中會(huì)專門的一個(gè)文件夾來管理路由，如下圖所示

那么有沒有一種方案，能夠?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)的事列表頁，詳情頁和編輯頁。

上圖是我們的文件目錄，views文件夾中存放的是所有的頁面，goodsPlanning是一級(jí)目錄，onNewComplete和thirdGoods是二級(jí)目錄，二級(jí)目錄中存放的是具體的頁面，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)的文件。那么有沒有辦法能夠讀取我們二級(jí)目錄下的所有文件，然后根據(jù)文件名來生成路由呢？答案是有的

2. require.context介紹

官方文檔require.context

簡(jiǎn)單說就是：有了require.context，我們可以得到指定文件夾下的所有文件

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

require.context有三個(gè)參數(shù)：

• directory：說明需要檢索的目錄

• useSubdirectories：是否檢索子目錄

• regExp: 匹配文件的正則表達(dá)式

require.context()的返回值，有一個(gè)keys方法，返回的是個(gè)數(shù)組

let routers = require.context('VIEWS', true).keys()
console.log(routers)

通過上面的代碼，我們打印出了所有的views文件夾下的所有文件和文件夾，我們只要寫好正則就能找到我們所需要的文件

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 = {} // 用來存儲(chǔ)以index.vue結(jié)尾的文件，因?yàn)閕ndex.vue是列表文件，需要加入layout（我們的菜單）,需要keepAlive，需要做權(quán)限判斷
let detailRouterArr = [] // 用來存儲(chǔ)以非index.vue結(jié)尾的vue文件，此類目前不需要layout
routers.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 首字母大寫方法
  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: '首頁', noCache: true, noVerify: true }
   }
  ]
 },
]

簡(jiǎn)簡(jiǎn)單單的幾十行代碼就實(shí)現(xiàn)了所有的路由功能，再也不用一行一行的寫路由文件了。可能你的文件管理方式和我的不一樣，但是只要稍微改改正則就行了。

4. 注意

1. 不能用import引入路由，因?yàn)橛胕mport引入不支持變量

2. 不能用別名，找了半天問題，才知道用變量時(shí)也不能用別名，所以我用的都是相對(duì)路徑

5.好處

• 不用在添加路由了，這個(gè)就不說了，明眼人都看得出來

• 知道了路由，一個(gè)能找到對(duì)應(yīng)的文件，以前我們團(tuán)隊(duì)就出現(xiàn)過，亂寫path的情況

• 更好的控制驗(yàn)證和keepAlive

關(guān)于如何在vue實(shí)現(xiàn)自動(dòng)化路由就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。