基于vue项目，如何构建组织可维护前端路由结构

前奏Tips：考虑了很久,基于现有的认知,现按项目页面体量,得出如下梳理:

1. 小型项目（页面量不是很多）：

• 直接写到一个文件内[太少了,没必要拆吧]
• 常用套路步骤(如官网)

    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
    import Vue from 'vue'
    import 'VueRouter' from 'vue-router'
    Vue.use(VueRouter)
    ------------
    // 1. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: ()=>import('...../foo.vue') },
      { path: '/bar', component: ()=>import('...../bar.vue')  }
    ]
    ------------
    // 2. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    ------------
    // 3. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！

2. 中型项目（页面量不少也不多）：

• 常规分拆，按照模块，通过ES6拓展符聚合
• 足够应对一般的常规的项目
• 常用套路步骤

    // 1. 定义路由
    // foo模块路由,index.js如下：
    const routes = [
      { path: '/foo1', component: ()=>import('...../foo1.vue') },
      { path: '/foo2', component: ()=>import('...../foo2.vue') },
      { path: '/foo3', component: ()=>import('...../foo3.vue') },
    ]
    
    // bar模块路由,index.js如下：
    const routes = [
      { path: '/bar1', component: ()=>import('...../bar1.vue') },
      { path: '/bar2', component: ()=>import('...../bar2.vue') },
      { path: '/bar3', component: ()=>import('...../bar3.vue') },
    ]
    
    // 总的router中聚合
    import foo from '....../foo'
    import bar from '....../bar'
    const routes = [
        {path: '/', redirect:{name:'index'} },
        ...foo,
        ...bar,
        {path: '*', component: ()=>import('...../erro.vue')}
    ]
    ------------
    // 2. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
    import Vue from 'vue'
    import 'VueRouter' from 'vue-router'
    import routes from '..../root-router'
    Vue.use(VueRouter)

    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    ------------
    // 3. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！

3. 大型及特大型项目（页面量很多，企业级）：

• 前两种基本都是集中化的管理页面，但是随着项目规模越来越大，单个js会管理大量的页面路由，维护起来有一定的困难，不够自动化
• 设计思路：既然大量的页面路由在单个js文件维护存在困难，那不如就路由根据业务进行拆分管理，每个业务对应的页面由其对应的路由文件来管理，然后在总的路由文件中再聚合各业务的路由文件
• 解决方案：核心技术【webpack的require.context()】【核心：通过正则匹配引入对应的模块】
  • 语法及示意：

      - require.context(directory, useSubdirectories = false, regExp = /^\.\//);
          - 参数说明：
              - directory：检索的目录
              - useSubdirectories：是否检索子目录
              - regExp：匹配文件的正则表达式
      
      - eg:
          根路由文件root-router.js中添加如下：
              // 获取context
              const context = require.context('./pages/', true, /router\.js$/)
              
              // 获取 routes
              const routes = context.keys().map(key => context(key).default)
              
              export default new VueRouter({ routes });
  

  • 官网参考地址
• 常用套路步骤：

    // 1. 按模块构建router.js
    // 在views(或者自己起名pages,随意)按照模块构建文件夹
    // 每个文件下创建router.js
    // 且该router.js只描述该模块的路由情况
    // 大致结构如下：
    export default {
      path: 'card-management',
      label: '卡券管理',
      name: 'CardManagement',
      children: [
        {
          path: 'list',
          name: 'CardManagementList',
          label: '券列表',
          component: TabPage,
          children: [
            ...CardListRouters,
            ...CardProvide
          ]
        },
        {
          path: 'create',
          label: '新建卡券',
          name: 'CardManagementListCreate',
          component: () => import('./CardCreate/Create')
        },
        .......
      ]
    }
    ------------
    // 2. 聚合routes
    // 在文件root-router.js中添加如下：
    // 获取context
    const context = require.context('./pages/', true, /router\.js$/)
    // 获取 routes
    const routes = context.keys().map(key => context(key).default)
    
    export default routes;
    ------------
    // 3. 如果使用模块化机制编程，导入Vue和VueRouter，要调用
    import Vue from 'vue'
    import 'VueRouter' from 'vue-router'
    import routes from '..../root-router.js'
    Vue.use(VueRouter)
    
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    ------------
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！

安利一下：

• 关于require.context还有很多其他作用，后续持续关注