vue 路由 使用 require.context 一行代码 自动导入 所有路由文件

在项目里 src/router/component 文件夹下 有N个路由文件

路径： src/router/component/about.js

import Layout from "@/layout";
export default [  // 用 export default 导出
  {
    path: "/about",
    component: Layout,
   }
   .....
] 


路径： src/router/component/news.js

import Layout from "@/layout";
export default [  // 用 export default 导出
  {
    path: "/news",
    component: Layout,
   }
   .....
] 

项目router/index.js 路由引入js文件，一个一个引入数目太多怎么办？

像这种情况!

可以使用 require.context 优化项目代码

我们封装一个方法，可以自动导入路由

路径: src/utils/importAll.js

// 通俗易懂方式
export function importAllFn(ctx = {}) {
  let routers = [];
  ctx.keys().forEach(function (item) {
    routers.push(ctx(item).default);
  });
  routers = routers.filter((re) => !!re).flat(2);  // 确保 引入的路由不能为空    // 有二维数组 要扁平化
  return routers;
}

// 优化后 
export function importAllFn(ctx = {}) {
  let routers = [];
  routers = (ctx.keys().map((item) => ctx(item).default || [])).flat(2)  // routers = routers.flat(2); 
  return routers;
}

// 持续优化
export function importAllFn(ctx = {}) {
  return (ctx.keys().map((item) => ctx(item).default || [])).flat(2) 
}

在router/index.js 里面引入

路径: src/router/index.js

// 自动引入路由 方法
import { importAllFn } from "@/utils/importAll";

// 传入参数 得到路由处理后的集合  importAll 相当于routes
let importAll = importAllFn(require.context("./component", false, /.js$/));

把项目里面几十行代码可以压缩到 1行，是不是炒鸡爽。
后期有新的路由 只需要在 router/component 文件夹下创建js文件即可，不需要再次手动引入，封装的方法会自动引入 是不是贼方便…