vue 动态添加路由 require.context()

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

之前的写法 

\'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的组件

以上是 vue 动态添加路由 require.context() 的全部内容， 来源链接： utcz.com/z/379935.html

回到顶部