一、Angular 创建一个默认带路由的项目
ng new angualrdemo --skip-install
二 、创建带路由模块:
ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing
三、在对应的模块中创建组件:
ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order
ng g component module/article
ng g component module/article/components/articlelist
ng g component module/article/components/info
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo
各模块中已经自动引入对应模块的组件
四、手动引入匹配对应模块的路由
五、配置懒加载
六、定义路由出口
运行效果如图 :
七、在子模块中添加子路由
在上面的基础上添加配置
子模块路由配置
添加对应跳转按钮
效果展示
路由配置完成!