对Angular 路由出口 router-outlet 的理解

前言

一直以为自己对路由理解的还不错，但是昨天写路由的时候发现自己对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模块

路由匹配流程图

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

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

总结

把自己学到的东西写出来会给自己大脑一个明确的思路，让知识更加具体化，而不是模模糊糊，在写之前我可能对路由的理解没有现在这么清晰，但是写完之后就会发现自己脑子里的东西清楚了很多，这是一种思维清晰化的过程。本文可能会有理解不到位或者不正确的地方，望指正。

版权声明

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