新建项目，新建几个子模块，实现懒加载
用户、商品、文章

新建这三个模块
创建模块的时候后面加 --routing.会自动生成模块的路由文件


先删掉。

重新创建模块带routing

这样就会生成两个文件

再分别去创建article和product这两个模块

创建对应的根组件，创建user根组件

product的根组件

文章的根组件


通过路由动态挂载模块，实现模块的懒加载
在user模块的路由上配置user的组件的路由

product模块的路由配置

article的路由同理

根模块的页面上 写上这三个链接地址


根据路由动态的加载模块

有作用了。但是链接地址和名称对应写错了


默认进来没有加载任何的模块，只有点击了才会去加载对应的模块

这就是路由实现了模块的懒加载
默认加载用户模块

加载对应的模块，又去模块下面匹配模块下的路由，实际情况是加载的user模块下的user组件

user下在新建组件：profile和address这两个组件

user下面路由配置


自定义模块里面的路由配置，在product下新建三个组件

配置plist的路由


实现父子的路由，通过路由的children配置

访问cart还是显示的商品的根组件。product和cart是一个父子路由的关系

我们需要在product的根组件页面上加入 路由的标签。这样它加载的子组件就会显示在这里了

这就是通过路由标签显示的内容

18-Angular 自定义模块以及配置路由模块懒加载的更多相关文章

  1. Angular 自定义模块以及配置路由实现模块懒加载

    项目目录 创建模块 ng g module module/user --routing ng g module module/article --routing ng g module module/ ...

  2. vue-cli 项目实现路由懒加载

    在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...

  3. (转)Webpack2 + Vue2 + Vue-Router2 如何实现懒加载?

    webpack2 的中 System.import 方法将被弃用, 推荐改成以下写法: https://www.mmxiaowu.com/article/5848239bd4352863efb5546 ...

  4. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  5. mybatis（三）懒加载

    懒加载的好处: 所谓懒加载(lazy)就是延时加载,延迟加载.什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载.至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为 ...

  6. mybatis 详解（八）------ 懒加载

    本章我们讲如何通过懒加载来提高mybatis的查询效率. 本章所有代码:http://pan.baidu.com/s/1o8p2Drs 密码:trd6 1.需求:查询订单信息,有时候需要关联查出用户信 ...

  7. vue 路由懒加载 使用，优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  8. SpringBoot JPA懒加载异常 - com.fasterxml.jackson.databind.JsonMappingException: could not initialize proxy

    问题与分析 某日忽然发现在用postman测试数据时报错如下: com.fasterxml.jackson.databind.JsonMappingException: could not initi ...

  9. MyBatis 懒加载

    懒加载的概念 MyBatis中的延迟加载,也称为懒加载,是指进行关联查询时,按需执行子查询. 当程序需要获取|使用关联对象时,mybatis再执行子查询,这样可以减轻数据库的压力,在一定程度上可以降低 ...

随机推荐

  1. flask如何使模板返回大文件，又不消耗大量内存

    当我们要往客户端发送大量的数据,比如一个大文件时,将它保存在内存中再一次性发到客户端开销很大.比较好的方式是使用流,本篇就要介绍怎么在Flask中通过流的方式来将响应内容发送给客户端.此外,我们还会演 ...

  2. Intel的东进与ARM的西征(5)--智慧的大窗口,我们都在画里面

    http://www.36kr.com/p/200168.html 繁华又算得了什么,不过是星尘的崩碎,那一抹青青的灰.公元 79 年,意大利维苏威火山喷发,已然兴盛了 600 年的庞贝古城被完全湮没 ...

  3. iOS多线程编程指南

    iOS多线程编程指南(拓展篇)(1) 一.Cocoa 在Cocoa上面使用多线程的指南包括以下这些: (1)不可改变的对象一般是线程安全的.一旦你创建了它们,你可以把这些对象在线程间安全的传递.另一方 ...

  4. atitit.窗口静听esc退出本窗口java swing c# .net php

    atitit.窗口静听esc退出本窗口java swing c# .net php 1. 监听esc  按键 1 1.1. 监听一个组件 1 1.2. 监听加在form上 1 2. 关闭窗口 2 1. ...

  5. Android Webview的测试

    1.查看当前的所有窗口: Set contexts= driver.getContextHandles(); System.out.println(contexts); 打印出当前所有的窗口 Set& ...

  6. 全局钩子 实例（不使用DLL和使用DLL两种）

    大家应该都知道,全局消息钩子要依赖于一个DLL才能够正常工作.于是呢,我也就理所当在地认为全局钩子都要依赖于一个DLL才能正常工作的,我想大部分人肯定和我一样也这么认为的. 但实际上不是这样的.有某些 ...

  7. linux centos7 安装常用软件java,node,mysql,Seafile

    linux centos7 安装常用软件java,node,mysql,Seafile 安装压缩解压缩软件 yum install -y unzip zip 安装git yum install -y ...

  8. 杭电 1596 find the safest road （最短路）

    http://acm.hdu.edu.cn/showproblem.php?pid=1596 这道题目与杭电2544最短路的思想是一样的.仅仅只是是把+改成了*,输入输出有些不一样而已. find t ...

  9. java sleep和wait的区别和联系

    Thread.sleep不会改变锁的行为,如果当前线程拥有锁,那么当前线程sleep之后,该锁不会被释放. Thread.sleep和Object.wait都会暂停当前的线程,让出cpu.Thread ...

  10. 【翻译自mos文章】即使resource_limit = false， password的 资源限制也会生效

    即使resource_limit = false, password的 资源限制也会生效 參考原文: Resource limits for passwords work even with reso ...