Angular 17+ 高级教程 – Routing 路由

前言

Angular 是 Single Page Application (SPA) 单页面应用，所谓的单页是站在服务端的角度看，不管游览器请求什么路径，都返回 index.html 即可。

那站在客户端的角度，不同的路径所呈现的内容都是不同的。简单的说，就是把原本服务端负责的路由 + 多页面，交到了客户端负责。

Angular 自带了一套完整的路由机制，这套机制不难理解，依赖的知识点也很少，基本上一个一个小单元学习就可以了，

只是功能和配置比较多，比较杂。在本文中，我将逐一列举这些功能和配置，最后还会稍微逛一逛源码，一起走吧🚀。

 

Routing 的基本原理

要让客户端负责路由，有 3 大件事需要做：

1. 屏蔽游览器的路由机制
   监听所有 <a> element 的点击事件，通过 event.preventDefault 方法阻止游览器默认行为。
   游览器默认会做 2 件事件，第一件是更新 URL 地址，第二件是发请求到服务端。
   虽然我们只是希望阻止它发请求，但是 preventDefault 没得选，它会同时阻止 URL 地址的更新，
   因此，在执行 preventDefault 之后，我们还需要利用 History API 自行更新 URL 地址。
2. 匹配路由与组件
   不同的路径对应着不同的内容，我们需要有一个匹配机制，比如说路径 /about 对应 About 组件，显示 About 的内容，
   路径 /contact 对应 Contact 组件，显示 Contact 内容。
3. 监听 URL 地址变更
   无论是 <a> href 还是 history back / forward，我们都需要监听到。
   history back / forward 是透过监听 popstate 事件得知的。
4. 监听 > 匹配 > 渲染
   每当 URL 地址变更，我们就做匹配找出对应的组件，然后通过 Dynamic Componnet 的方式创建它，接着用 ViewContainerRef.insert 插入到页面里。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

目录

上一篇 Angular 17+ 高级教程 – Component 组件 の Control Flow

下一篇 TODO

想查看目录，请移步 Angular 17+ 高级教程 – 目录