vue 動態新增路由 require.context()
阿新 • • 發佈:2018-12-11
之前的寫法
'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import Survey from 'page/Survey' import MessageFingure from 'page/MessageFingure' import InterfaceMonitor from 'page/InterfaceMonitor' import PowerDivisioin from 'page/PowerDivisioin' import ApiInfofrom 'page/ApiInfo' import UserInfo from 'page/UserInfo' import CodeTable from 'page/CodeTable' import PowerToMe from 'page/PowerToMe' import MessageConfig from 'page/MessageConfig' Vue.component('MessageBroadcast', MessageBroadcast) Vue.component('Survey', Survey) Vue.component('MessageFingure', MessageFingure) Vue.component('InterfaceMonitor', InterfaceMonitor) Vue.component('PowerDivisioin', PowerDivisioin) Vue.component('ApiInfo', ApiInfo) Vue.component('UserInfo', UserInfo) Vue.component('CodeTable', CodeTable) Vue.component('PowerToMe', PowerToMe) Vue.component('MessageConfig', MessageConfig)
今天剛搞明白 如何通過webpack 去動態載入路由
網上有很多方法,但是挺多都不好用,所以我把自己成功實現的 貼出來。
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
引數說明:
1. 你要引入檔案的目錄
2.是否要查詢該目錄下的子級目錄
3.匹配要引入的檔案
返回:
1. context.require 返回一個require 函式:
function webpackContext(req) {
return __webpack_require__(webpackContextResolve(req));
}
2. 改函式有三個屬性:resolve 、keys、id
· resolve: 是一個函式,他返回的是被解析模組的id
· keys: 也是一個函式,他返回的是一個數組,該陣列是由所有可能被上下文模組解析的請求物件組成
· id:上下文模組的id
import Vue from 'vue' function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1) } function validateFileName(str) { return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1)) } const requireComponent = require.context('./', true, /\.vue$/) requireComponent.keys().forEach(filePath => { const componentConfig = requireComponent(filePath) const fileName = validateFileName(filePath) const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName Vue.component(componentName, componentConfig.default || componentConfig) })
實現效果,
成功的動態載入了 Page資料夾下面所有的名為index.vue的元件