vue实现路由批量自动导入（已实现）

文件目录规范如下：有一个专门的js文件对应当前页面的路由信息配置

demo

const baiDuMap = () => import("./baiDuMap.vue");
export default {
  path: "/baiDuMap",
  name: "baiDuMap",
  meta: {
    title: "百度地图",
  },
  component: baiDuMap,
};

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";


/* 动态添加路由 */
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [],
});
var requireFile = require.context("../views/", true, /\/*\.js$/); // 匹配所有js文件
requireFile.keys().forEach((fileName) => {
  const moduleConfig = requireFile(fileName); // 加载配置文件
  const routeList = moduleConfig.default || moduleConfig; // 默认导出或直接导出路由配置数组
  router.addRoute(routeList);
});
/* 动态添加路由 */

/* 防止连续点击多次路由报错 */
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch((err) => err);
};
/* 防止连续点击多次路由报错 */

/* 通过 vue-router 提供的全局导航守卫，在每次路由切换后手动修改浏览器的标题。 */
router.afterEach((to) => {
  document.title = to.meta.title || "默认标题";
});
/* 通过 vue-router 提供的全局导航守卫，在每次路由切换后手动修改浏览器的标题。 */

export default router;