首页 > 解决方案 > Angular 如何在内部实现路由?

问题描述

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

然而,Angular 中的路由似乎反驳了这种幼稚的理论。如果浏览器正在显示一个 Angular 页面,并且用户在浏览器中输入了一个新 URL,如果该 URL 由 Angular 应用程序的路由控制,Angular 只会应用它的路由,浏览器不会访问网络,并且页面没有被替换。

Angular 如何以这种方式规避浏览器的正常运行?

标签: angularbrowser

解决方案


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

第一次访问应用程序

当您第一次访问基于 Angular 的应用程序(根路径或某些子路由)时,浏览器将向网络服务器查询该 url。根路由或某些子路由使用加载 angular 的相同 index.html 响应,然后 Angular Router 获取当前 url 并决定显示什么。

注意:这种方法在使用服务器端渲染时有所不同

第二个链接到应用程序内的某些路线

当使用routerLink指令或直接触发内部路由更改时,角度只是使用History APIRouter替换 URL 。没有额外的请求(或者是,取决于你的应用程序是否使用延迟加载

最初加载应用程序后第三次手动更改 url

由于在第一次访问时缓存已准备好,浏览器将只使用缓存的 index.html 来加载缓存的 Angular JavaScript z,这将非常快,看起来页面没有重新加载,但确实如此。


推荐阅读