前言

始终认为本人对路由了解的还不错，然而昨天写路由的时候发现自己对 angular 中的 router-outlet 的了解还不透彻，在此想说一下我对 router-outlet 的了解。

什么是路由

首先说一下什么是路由，集体了解路由就相当于一个路线的方向或者说是目的地，路由阐明了下一个跳转的链接。路由定义大部分都是在模块之间，通常利用 url 助手函数生成相应的路由，此外路由还能够加一些参数，比方 id、name 等。

angular 路由的作用

如定义所说，路由既然相当于目的地，那么路由的作用就是导航，能够实现页面的切换，通过生成地址链接，跳到下一个咱们想拜访的页面。

路由进口 router-outlet 匹配路由的办法

对于 router-outlet 来说，他会通过门路的代码，联合路由跳到相应的组件，比方：

此图中的 children 上面的路由的意思是多个进口，上面每一个 path 都对应一个组件，其中 loadChildren 那一行是惰性加载，就是说用到谁，就去找谁加载谁，即按需加载，这样的话能够缩小加载工夫，因为这样的话就防止了每一次起我的项目都会加载所有组件，造成缓存加大，加载工夫长的坏状况。

此为 v 层中定义的路由进口，此写法意味着该标签的 name 属性值默认为 primary 也就是联合路由定义中 children 中的 path 和地址链接去拜访相应模块。然而当咱们手动定义 name 属性的时候就不一样了。


如果咱们手动定义 name 属性的话，那么咱们往往会在路由设定时设置 outlet 的值，留神：outlet 属性的值要和咱们 v 层 <router-outlet> 标签的 name 属性的值绝对应，path 应为 <base-path>，从而可能让 angular 可能晓得咱们读取到哪个文件对应标签的 name 属性之后应该匹配哪个 path，进而跳转到咱们冀望的路由。
当然，咱们还能够本人定义当路由是什么的时候，让其跳转到咱们想要的另一个链接，如下图：
本图的意思是当咱们本级路由为空的时候，主动重定向跳转到本级路由为 login 的界面，同时我须要 AuthMoudle 模块，再去加载相应模块。比方咱们输出 localhhost：4200，他就会间接跳转到其下的 login，即显示 AuthMoudle 模块

路由匹配流程图

一图胜万言，废话不多说间接上图吧

下面说了一大堆，不如间接看流程图来的简洁明了，这就体现了流程图的重要性。

总结

把本人学到的货色写进去会给本人大脑一个明确的思路，让常识更加具体化，而不是隐隐约约，在写之前我可能对路由的了解没有当初这么清晰，然而写完之后就会发现自己脑子里的货色分明了很多，这是一种思维清晰化的过程。本文可能会有了解不到位或者不正确的中央，望斧正。

版权申明

本文作者：河北工业大学梦云智开发团队 – 陈丽婷