在 Angular 应用程序中，导航通常会导致 URL 的更改。但是，在某些情况下，您可能希望导航时 URL 保持不变。本文将介绍如何在 Angular 中实现这种导航。
使用路由器导航
在 Angular 中，我们通常使用路由器导航到不同的视图。当我们使用路由器导航时，URL 会相应地更改。这是默认行为。
但是，路由器还提供了一种更灵活的导航方法，即使用 Router.navigate() 方法。这个方法可以让我们在导航时控制 URL 的更改。
例如，假设我们有一个名为 MyComponent 的组件，我们希望在导航到该组件时 URL 保持不变。我们可以使用以下代码：
------ - ------ - ---- ------------------
------------
-- ---
--
------ ----- ----------- -
------------------- ------- ------- --
---------------------------- -
----------------------- -------- - -------- -------------- - --- -
------------------- -----
---
-
-在上面的代码中，我们使用 Router.navigate() 方法来导航到 MyComponent。但是，我们还传递了一个选项对象，其中 skipLocationChange 属性设置为 true。这告诉路由器在导航时不要更改 URL。
注意，我们还使用了一个 outlets 属性，它指定了我们要导航到的 primary 出口。
使用 Location 对象
另一种控制导航时 URL 更改的方法是使用 Angular 的 Location 对象。该对象提供了几种方法来操作 URL。
例如，我们可以使用 Location.replaceState() 方法来替换当前 URL 的状态，而不是添加一个新的历史记录条目。这样，导航时 URL 将保持不变。
以下是一个示例：
------ - -------- - ---- ------------------
------------
-- ---
--
------ ----- ----------- -
------------------- --------- --------- --
---------------------------- -
--------------------------------------------
-
-在上面的代码中，我们使用 Location.replaceState() 方法来将当前 URL 替换为 /my-component。这样，导航时 URL 将保持不变。
总结
在本文中，我们介绍了如何在 Angular 中实现导航时 URL 不改变的方法。我们可以使用路由器的 Router.navigate() 方法和 skipLocationChange 选项，或者使用 Location 对象的 replaceState() 方法。这两种方法都可以让我们在导航时控制 URL 的更改。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65f94212d10417a22250c00b