新建项目，新建几个子模块，实现懒加载
用户、商品、文章
新建这三个模块
创建模块的时候后面加 --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 自定义模块以及配置路由模块懒加载的更多相关文章
-
Angular 自定义模块以及配置路由实现模块懒加载
项目目录 创建模块 ng g module module/user --routing ng g module module/article --routing ng g module module/ ...
-
vue-cli 项目实现路由懒加载
在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...
-
(转)Webpack2 + Vue2 + Vue-Router2 如何实现懒加载?
webpack2 的中 System.import 方法将被弃用, 推荐改成以下写法: https://www.mmxiaowu.com/article/5848239bd4352863efb5546 ...
-
VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
-
mybatis（三）懒加载
懒加载的好处: 所谓懒加载(lazy)就是延时加载,延迟加载.什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载.至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为 ...
-
mybatis 详解（八）------ 懒加载
本章我们讲如何通过懒加载来提高mybatis的查询效率. 本章所有代码:http://pan.baidu.com/s/1o8p2Drs 密码:trd6 1.需求:查询订单信息,有时候需要关联查出用户信 ...
-
vue 路由懒加载 使用，优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
-
SpringBoot JPA懒加载异常 - com.fasterxml.jackson.databind.JsonMappingException: could not initialize proxy
问题与分析 某日忽然发现在用postman测试数据时报错如下: com.fasterxml.jackson.databind.JsonMappingException: could not initi ...
-
MyBatis 懒加载
懒加载的概念 MyBatis中的延迟加载,也称为懒加载,是指进行关联查询时,按需执行子查询. 当程序需要获取|使用关联对象时,mybatis再执行子查询,这样可以减轻数据库的压力,在一定程度上可以降低 ...
随机推荐
-
chkconfig系统服务启动设置
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息. 谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--a ...
-
nginx系统真正有效的图片防盗链完整设置详解
原文:http://www.wufangbo.com/nginx-fang-dao-lian/ 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链并不是真正的 ...
-
使用gson进行json转换
Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库.可以将一个 JSON 字符串转成一个 Java 对象,或者反过来. 示例代码如下: 实体定义 ...
-
InnoDB 索引原理
InnoDB索引原理 索引能够提高访问的速率 B+树索引(最为常用和最为有效).全文索引.哈希索引. 数据库中的B+树索引可以分为聚集索引和辅助索引,但是不管是聚集还是辅助的索引,其内部都是B+树,是 ...
-
通过拼接SQL字符串实现多条件查询
一.通过拼接SQL字符串的方法的好处是: 1.方便查询条件的扩展. 2.简化业务逻辑的判断. 二.例子: 1.界面设计 2.点击查询的代码 /// <summary> /// 按条件查询 ...
-
More Effective C++ 35 条款
一.基础议题(basics) 条款1:仔细区别 pointers 和 references(Distinguish between pointers and references) 一个基本的语法问题 ...
-
JPA（五）：映射关联关系------映射单向多对一的关联关系
映射单向多对一的关联关系 新建Customer.java: package com.dx.jpa.singlemanytoone; import java.util.Date; import java ...
-
SQL处理数据并发，解决ID自增
1 创建MaxIdProcess表,由于存储ID的最大值 CREATE TABLE [dbo].[MaxIdProcess]( ,) NOT NULL, --自增ID ) NOT NULL, --存储 ...
-
[Codeup 25481] swan
莫名其妙还找到了另一个铟炔锶烃的OJ : Codeup墓地 25481: swan 时间限制: 1 Sec 内存限制: 128 MB献花: 86 解决: 13[献花][花圈][TK题库] 题目描述 ...
-
tomcat各文件夹及作用
1.bin目录:这个文件夹包含的是启动/关闭tomcat的脚本 2.conf目录:主要是用来存放一些Tomcat的配置文件,都是一些.xml部署文件,其中重要的有: server.xml:是Tomca ...