// rootRoute.js
const rootRoute = {
childRoutes: [
{
path: '/',
component: AppLayout,
childRoutes: [
{
path: 'shop', // 购买详情页
component: Shop
},
{
path: 'order', // 订单页
component: Order
}
// ...
// 少量其他路由
// ...
]
}
]
};
// rootRoute.js
const rootRoute = {
childRoutes: [
{
path: '/',
component: AppLayout,
childRoutes: [
{
path: 'shop', // 购买详情页
component: ShopLayout,
childRoutes: [
{
path: 'foodDetail',
component: FoodDetail
},
{
path: 'shoesDetail',
component: ShoesDetail
}
// 其他
]
},
{
path: 'order', // 订单页
component: Order,
childRoutes: [
{
path: 'remark', //订单备注
component: Remark
},
{
path: 'invoice', //发票抬头
component: Invoice
},
{
path: 'payment', //付款页面
component: Payment
},
{
path: 'userValidation', //用户验证
component: UserValidation
},
{
path: 'chooseAddress', //选择地址
component: ChooseAddress,
childRoutes: [
{
path: 'addAddress', //添加地址
component: AddAddress,
childRoutes: [
{
path: 'searchAddress', //搜索地址
component: SearchAddress
}
]
}
]
}
]
}
// ...
// 大量新增路由
// ...
]
}
]
};
// rootRoute.js
const rootRoute = {
childRoutes: [
{
path: '/',
component: AppLayout,
childRoutes: [
require('./modules/shop/route'), //购买详情页
require('./modules/order/route'), // 订单页
require('./modules/login/route'), // 登录注册页
require('./modules/service/route'), // 服务中心
// ...
// 其他大量新增路由
// ...
]
}
]
};
webpack 官方文档的介绍require.context
require.context(directory, useSubdirectories, regExp)
const rootRoute = {
childRoutes: [
{
path: '/',
component: AppLayout,
childRoutes: (r => {
return r.keys().map(key => r(key));
})(require.context('./', true, /^\.\/modules\/((?!\/)[\s\S])+\/route\.js$/))
}
]
};
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |