前言

由于项目中的路由模块越来越多，之前手动 import 单个路由文件的方式，显得有些笨重了。

这里我参照 Vue.js最佳实践（五招让你成为Vue.js大师） 中 “第二招：一劳永逸的组件注册” 的方式，实现了动态增加路由的功能。

正文

源码

  1. 目录结构

目录结构.png

可以看到路由文件已经挺多的了，后期可能还会增加

  1. 为了方便看到具体代码应该写的位置，源码先截图

源码截图.png

过滤掉的是我这边需要特殊设置的路由文件，具体的业务中可以忽略掉

  1. 源码
  1. /************************************************************************动态添加路由 */
  2. // 找到 router 文件夹下以 .js 命名的文件
  3. const requireRouter = require.context(".", false, /\.js$/);
  5. requireRouter.keys().forEach(fileName => {
  6.   const routerConfig = requireRouter(fileName);
  7.   // 因为得到的 fileName 格式是: './gridView.js', 所以这里我们去掉头和尾，只保留真正的文件名
  8.   const routerName = fileName.replace(/^\.\//, "").replace(/\.\w+$/, "");
  10.   // console.log(routerName);
  11.   // console.log(routerConfig.default)
  12.   // 动态添加路由
  13.   routerConfig.default && router.addRoutes(routerConfig.default);
  14. });
  15. /************************************************************************动态添加路由 */