Angular最新教程-第九节路由二（路由策略、base标签、路由参数）

最新推荐文章于 2025-01-07 09:20:15 发布

陈小聪-小虎Oni

最新推荐文章于 2025-01-07 09:20:15 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular4.x入门教程文章标签： angular html5 html

本文链接：https://blog.youkuaiyun.com/onil_chen/article/details/78124134

Angular4.x入门教程同时被 3 个专栏收录

14 篇文章 ¥59.90 ¥99.00

订阅专栏

原创

72 篇文章

订阅专栏

小虎Oni

43 篇文章

订阅专栏

这篇教程详细讲解了Angular中的路由策略，包括HTML5的History API和LocationStrategy的使用，如HashLocationStrategy和PathLocationStrategy。此外，还介绍了base标签在Angular路由中的作用，并展示了如何设置和使用。同时，文章探讨了路由参数的配置和ActivatedRoute模块在获取参数中的应用。

路由策略

我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy}
上一节课中我们说明了html中传统的锚标示路由。
这里我们再看新的路由的另一种实现方式了。
是HTML5的新规则，在不需要刷新页面的轻快下，允许在代码中创建新的浏览器记录并显示适当的URL。
简单的说，就是你可以用代码修改地址栏的URL而不刷新页面。
这是使用js中的history.pushState方法实现的。
语法如下：
history.pushState(state, title, url);
（需要注意的是微信虽然支持了HTML5，但是微信中这个方法不能用，不允许修改URL地址。）
Angular中，路由的默认形式是新的这种HTML5。
上面我们已经提到了这种方式有些浏览器不支持。
而且，当我们使用服务端渲染的方式部署时。
要使用HTML5这种方式，还需要服务端配合。
所以我们这里增加了定位策略（LocationStrategy）。
LocationStrategy负责从浏览器的URL表示和读取路由状态。
angular提供了两种策略：HashLocationStrategy和PathLocationStrategy。
应用程序应使用Router或Location与应用路由状态进行交互。
例如，HashLocationStrategy会生成类似http://example.com#/foo的URL，
而PathLocation