Angular 通过注入 $location 获取与修改当前页面URL的

Angular中的URL管理与修改：通过$location实现控制

在Web开发中，URL的管理与修改是不可或缺的部分。Angular框架为我们提供了强大的工具——$location服务，使我们能够轻松地获取和修改当前页面的URL。下面，我们将通过一个实例代码来展示如何使用$location服务进行URL操作。

一、获取URL信息

我们可以通过$location服务获取当前页面的各种URL信息：

1. 获取当前完整的URL路径：

```javascript

var absurl = $location.absUrl();

//

```

2. 获取当前URL的路径（后面的内容，包括参数和哈希值）：

```javascript

var url = $location.url();

// 结果：/homePage?id=10&a=100

```

3. 获取当前URL的子路径（也就是后面的内容，不包括参数）：

```javascript

var pathUrl = $location.path();

// 结果：/homePage

```

除此之外，你还可以获取URL的协议、主机名、端口、哈希值以及参数的序列化json对象等信息。

二、修改URL内容

接下来，我们可以使用$location服务来修改URL的相关内容：

1. 修改URL的子路径部分：

```javascript

$location.url('/validation');

// 结果：

```

2. 修改URL的哈希值部分：

```javascript

$location.hash('myhash3');

// 结果：

```

3. 修改URL的参数部分：

```javascript

$location.search('id','111');

// 结果（修改参数值）：

$location.search('ids','111');

// 结果（新增ids参数)：

```

你还可以一次性修改多个参数，或者删除某个参数。值得注意的是，每次修改URL时，它都会被存入历史记录。如果你不想这样，而只是想要替换当前记录，可以使用$locationChangeSuccess事件来实现。具体实现方式这里不再赘述。以上代码示例只是简单展示了如何使用$location服务进行URL的获取和修改，实际使用中可能还需要根据具体需求进行更深入的定制和操作。希望这些示例能够帮助你更好地理解Angular中的URL管理。