vue路由文件拆分管理

随着项目的原来越大，路由越来越多，我们的路由也会越来越多，如果都集中在一个文件中，会很冗杂文件很长。这时候我们可以将路由文件拆分，可读、方便管理。多人合作添加路由也能更多的避免代码冲突

代码拆分目录如图：

• 在router文件夹下index.js处理路由逻辑代码
• router.js注册导出所有路由
• routes文件下放置各个模块的路由文件（视项目情况输出方式可以是数组，也可以是对象）

routes文件下单模块路由文件 - moduleRoutes.js

moduleRoutes.js输出方式是数组：

// 输出方式是数组
export const moduleRoutes = [{path: '/test',name: 'test',component: () => import('../../pages/test.vue') // 懒加载对应vue文件}
]

router.js整合各个模块的路由并输出

router.js整合输出方式是数组：

import {moduleRoutes} from './routes/moduleRoutes.js' // 测试模块文件路径// 数组形式 输出路由
export const routes = [...moduleRoutes
]

 index.js引入router

// vue3
import {createRouter} from 'vue-router'
import {routes} from './router.js' // 引入router.js的输出const router = createRouter({routes, // 输出路由
})
export default router // 导出路由

-------------------------------------------------------------------------------------------------------------------------------- 

 moduleRoutes.js输出方式是对象：

// 输出方式是对象
// 根据项目的路径复杂情况设置
import BaseLayout from '@/layout/BaseLayout.vue'
const appCode = process.env.sysCodeexport const moduleRoutes = {path: '/' + appCode + '/test',name: 'test',component: BaseLayout,meta: {title: 'test',requiresAuth: true},children: [{path: 'review',name: 'review',component: () => import('@/views/erp/afterSales/review/review.vue'),meta: {title: 'Review',requiresAuth: true}}]
}

 router.js整合输出方式是对象：

import {moduleRoutes} from './routes/moduleRoutes.js' // 测试模块文件路径// 对象形式 输出路由
export const routes = [moduleRoutes
]

 index.js引入router

// vue3
import {createRouter} from 'vue-router'
import {routes} from './router.js' // 引入router.js的输出const router = createRouter({routes, // 输出路由
})
export default router // 导出路由