天猫网站建设基本情况百度公司招聘官网最新招聘
随着项目的原来越大,路由越来越多,我们的路由也会越来越多,如果都集中在一个文件中,会很冗杂文件很长。这时候我们可以将路由文件拆分,可读、方便管理。多人合作添加路由也能更多的避免代码冲突
代码拆分目录如图:
- 在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 // 导出路由