Angular内部是如何实现路由的？

Question

在我对网络浏览器的天真理解中，我一直认为，如果用户在浏览器中输入一个新的URL，它就会导航离开当前页面，从网络中获取一个新的页面，然后显示新的页面来代替旧的页面。

然而，Angular中的路由似乎推翻了这个天真的理论。 如果浏览器正在显示一个Angular页面，用户在浏览器中输入一个新的URL，如果这个URL是由Angular应用的路由控制的，那么Angular只需应用它的路由，浏览器不访问网络，页面也不会被替换。

Angular是如何通过这种方式规避浏览器的正常功能的呢？

Answer 1

在不同的情况下，它有几种工作方式。

第一次访问应用程序

当你对一个基于Angular的应用进行第一次访问时（无论是根路由还是某个子路由），浏览器会向webserver查询该url。无论是根路由还是某个子路由，都会用同样的index.html响应，加载Angular，然后Angular Router获取当前的url，并决定显示什么。

注意 这种方法在使用 服务器端渲染

连接到应用程序中的某个路由的第二个链接

当使用 routerLink 指令，或直接触发在 Router，Angular只是将URL用 历史API. 没有额外的请求（或者是，取决于你的应用程序是否使用了 懒惰加载

第三次在应用程序被初始化后手动更改网址

由于在第一次访问时，缓存已经被初始化，所以浏览器只会使用缓存的index.html来加载缓存的angular JavaScript z，这样速度会非常快，似乎页面没有被重载，但确实如此。