vue 動態添加路由 require.context()

 

之前的寫法 

'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 ApiInfo from '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的組件