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.sysCode

export 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 // 导出路由