vue-router的模块化开发

在开发过程中，我们所有的router肯定不能放在index.js里，传统方案哪怕用各个js细分了各模块，还是需要在index.js里注册一下，这样很容易与他人代码冲突。这里我将提供我的思路，有什么不成熟的地方还望及时沟通。
以下便是项目结构：

丨- router
    丨- modules
           - item.js
    - index.js

其中最主要的就是index.js的配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)  // use 放在这能为 main.js 省俩行代码
// 以下则是获取 modules 下所有的 router 模块，适用于Vue2
const routerArr = require.context('./modules', true, /.js$/)
let routerArrNew = []
routerArr.keys().forEach(key => {
  routerArrNew.push(routerArr(key).default)
})

// Vue3弃用了require.context，所以我们使用：
const routerArr = import.meta.globEager('./modules/*.js')
let routerArrNew = Object.values(routerArr).map(el=>el.default[0])

const routes = [
  {
    path: '*',
    redirect: '/'
  },
  ...routerArrNew
]
const router = new VueRouter({
  routes
})
export default router

以上特殊公共路由可直接在routes里添加。
需要注意当前使用vue版本是否为vue3，vue3是不支持require.context的，需要格外注意。
此外，import.meta.globEager无法遍历子目录，可能需要更改编写习惯。

以下便是modules内的路由编写方法：

const routes = [
  {
    path: '/index/demo',
    title: '测试',
    component: () => import("@/view/home/home")
  }
]
export default routes

就是像以前一样正常的使用就可以了，如需要增加其他参数也可以主动添加。

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。