基于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还有很多其他作用，将在后续陆续跟进

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

原文：https://www.cnblogs.com/yogic/p/14871176.html