# Vue 多模块管理路由（Router）请求（Axios）

Posted 2022-05-04 爱码代码的喵

Vue 多模块管理路由（Router）、请求（Axios）

友情链接：Vue 组件封装打包发布：https://blog.csdn.net/qq_37248504/article/details/123293585

• 使用 vue-router

需求

• 前端 Vue拆分成多个模块的时候，路由在各自模块中管理，最后将路由收集到主模块中进行注册
• Vue多模块中axios配置调用不同的服务

路由Router 统一管理

• 目前有模块 shop-back-app、和 lowcode-model，shop-back-app模块依赖lowcode-model，shop-back-app需要收集lowcode-model的路由进行注册。

导出需要注册的路由

• 在模块lowcode-model中导出当前模块的路由 lib.js

import datasource from './components/datasource/datasource.vue'
import model from './components/model/model.vue'

/*配置路由*/
const routes=[
    
			path:"/back/model/model",component:model,	meta: title:"数据库建模",	permission: true
		,
    
			path:"/back/model/datasource",component:datasource,	meta: title:"数据源",	permission: true
		
]

/*导出路由模块*/
// export default routes


import getMenu from './api/system.js'

// 所有的接口
const apis =[
	getMenu
]

export default
	/*导出路由模块*/
	routes,
	apis

• 模块shop-back-app install lowcode-model
• 模块shop-back-app中收集路由并且进行注册，model-router.js：从模块lowcode-model中收集路由

import modelrouter from 'lowcode-model'

const modelRoutes = modelrouter.routes

export default modelRoutes
console.log('lowcode-model 中的导出内容：', modelrouter)

• 模块shop-back-app的路由中添加，注册完成直接可以从页面访问到 lowcode-model中的页面了

import Vue from 'vue'
import Router from 'vue-router'
//  模型中的路由
import ModelRouter from './model-router'

Vue.use(Router)

// core 模块的菜单
export default new Router(
  routes: [
    
      path: '/back/',
      component: () =>
        import('../views/backhome/Home.vue'),
      meta: 
        title: '自述文件'
      ,
      children: [
        
          path: '/back/taskdefine',
          component: () =>
            import('../views/task/taskdefine/taskdefine.vue'),
          meta: 
            title: '任务定义'
          
        ,
        
          path: '/back/taskdeploy',
          component: () =>
            import('../views/task/taskdeploy/taskdeploy.vue'),
          meta: 
            title: '任务部署'
          
        ,
        
          path: '/back/taskperfromlog',
          component: () => import('../views/task/taskperfromlog.vue'),
          meta: 
            title: '任务执行日志'
          
        ,
        // 模型中的路由
        ...ModelRouter
      ]
    
  ]
)

• 页面效果如下

接口请求 Axios 统一管理

Vue Axios 后端多个地址请求配置

• 为了满足不同模块去请求后端不同的地址，封装 axIos的配置

详细配置请看：https://blog.csdn.net/qq_37248504/article/details/107326698

• 这个配置满足了单模块项目中去请求多个后端地址

• 这个目前在多个模块中都配置了一下 axios，目前不是很熟悉，先这样用

tps://blog.csdn.net/qq_37248504/article/details/107326698

• 这个配置满足了单模块项目中去请求多个后端地址

• 这个目前在多个模块中都配置了一下 axios，目前不是很熟悉，先这样用

完整代码：https://gitee.com/Marlon_Brando/lowcode_before/commit/5c951e12c56b97cd1c2f11a21b8f947ff90aac96