vue 動態註冊路由 require.context

需求場景：

在日常的功能練習和除錯過程中，需要一個demo專案進行功能測試，由於頻繁.vue頁面的同時，又要再router.js檔案裡面註冊路由，感覺有點無聊和枯燥。基於此出發點，考慮能否自動讀取資料夾下的檔案進行路由註冊。

 

借鑑思路：

參考vue的功能基礎元件的自動化全域性註冊，看到一個require.context方法，可以讀取某個資料夾下的檔案資訊。因此考慮，使用這個方法，獲取views資料夾下的.vue頁面，資料夾名稱作為路由名稱

require.context的使用介紹：

一個webpack的api,通過執行require.context函式獲取一個特定的上下文,主要用來實現自動化匯入模組,在前端工程中,如果遇到從一個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組

 

頁面程式碼：

如下圖示，views資料夾下的內容，都需要進行路由註冊。

檔案的路徑有2種，（1）簡單的vue功能頁面，直接掛在views資料夾下；（2）複雜的頁面，在views下在新建資料夾進行處理。

目前需要自動註冊的路由頁面，是針對“直接掛在views資料夾”下的頁面。（因為views下的二級頁面，暫時沒有想到好的方案）

 

router/index.js頁面程式碼

心路歷程：

（1）一開始的想法，是想著用陣列物件的方式定義好，路由名稱和引入的路徑地址，但是覺得還是不夠自動化，新建.vue檔案的時候還是需要手動新增；

（2）後來想到用使用require.context方法得到fileName，然後根據字串裁減和拼接，得到我所需的url和檔案相對路徑；

　　例如： component: () =>import(【變數】)，但是後來發現，import()裡面，不能使用變數!!!!!!!!!

　　原因：根據es6module語法，由於import是靜態執行，所以不能使用表示式和變數這些只有在執行時才能得到結果的語法結構。
（3）由由於import的使用限制，不能動態使用() =>import的語法，因此在考慮，能否直接替換掉這種非同步載入引入的寫法。經過分析，得出pathConfig欄位裡面有一個屬性的內容，是指定的vue頁面的default模組內容。經測試，可以使用。

　　pathConfig的列印內容如下示：

    

（4）因此“views”資料夾下的".vue"檔案，引入成功，並用變數routerAry儲存起來，使用concat方法把其他需要手動註冊的路由資訊，連線起來，進行路由註冊。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 查詢指定資料夾下的vue頁面，自動註冊路由
// 僅適用於：一個資料夾下的多個路由頁面。用於簡單的頁面的註冊
// pathConfig.default的內容，是指定的vue頁面的default模組內容，等同於: () => 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