用require.context自动注册组件和路由

最新推荐文章于 2023-11-21 16:34:05 发布

大猫会长

最新推荐文章于 2023-11-21 16:34:05 发布

阅读量899

点赞数

分类专栏： webpack 文章标签： css web mongodb

本文链接：https://blog.csdn.net/aexwx/article/details/121425766

版权

webpack 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

/************************************************************************动态添加路由 */
// 找到 router 文件夹下以 .js 命名的文件
const requireRouter = require.context(".", false, /\.js$/);

requireRouter.keys().forEach(fileName => {
  const routerConfig = requireRouter(fileName);
  // 因为得到的 fileName 格式是: './gridView.js', 所以这里我们去掉头和尾，只保留真正的文件名
  const routerName = fileName.replace(/^\.\//, "").replace(/\.\w+$/, "");

  // console.log(routerName);
  // console.log(routerConfig.default)
  // 动态添加路由
  routerConfig.default && router.addRoutes(routerConfig.default);
});
/************************************************************************动态添加路由 */

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)
})

const registerRoutes = () => {
  const contextInfo = require.context('./views', true, /.vue$/)
  const routes = contextInfo.keys().map((filePath) => {
    // filePath 形如 ./Home.vue、./modifiers/capture.vue
    // path我们希望是/home、/modifiers/capture
    // 所以需要把开头的./和.vue都替换为空
    const path = filePath.toLowerCase().replace(/^\.|\.vue/g, '')
    // name的话将/home、/modifiers/capture转成小驼峰即可
    // 把开头的/先替换掉，再把第一个/后的单词变成大写就可以了
    const name = path.replace(/^\//, '').replace(/\/(\w)/, ($0, $1) => $1.toUpperCase())
    // 通过require去读取.vue文件内容
    const component = require(`./views${filePath.replace(/^\./, '')}`).default

    return {
      path,
      name,
      component
    }
  })

  return routes
}