概述
如果要获取一个网站的URL信息，那么window.location就是你要找的！使用其属性获取当前页面地址的信息，或者使用其方法进行某些页面重定向或刷新。
window.location属性
| window.location | 返回值 |
|---|---|
| .origin | 基本网址（协议+主机名+端口号） |
| .protocol | 协议架构 (http: 或 https) |
| .host | 域名+端口 |
| .hostname | 域名 |
| .port | 端口号 |
| .pathname | 第一个'/' + 后面的Path |
| .search | ? + 查询字符串 |
| .hash | # + 锚点或片段标识符 |
| .href | 完整URL |
host VS hostname
在上面的示例中，您会注意到host和hostname的返回值。 那么为什么要这些属性？ 好吧，这与端口号有关。 让我们来看看。
所以，host会包含端口号，但是hostname只会返回主机名。
怎么改变URL属性
您不仅可以调用这些属性来获取URL信息。 您也可以使用它来设置新属性并更改URL。 让我们看看我的意思。
这是可以更改的属性的完整列表：
唯一不能设置的属性是window.location.origin，它是只读的。
Location对象
window.location返回一个Location对象，它提供了当前页面location相关的信息，但是您也可以通过几种方式访问Location对象。
我们能这么做的原因是这些都是我们浏览器中的全局变量。
window.location VS location
上面的四种写法指向同一个Location对象，我个人更喜欢window.location，并且避免直接使用location。主要是因为location读起来更像是通用术语，并且有人可能会不小心覆盖了这个全局变量名。举个例子：
我认为大部分开发者都知道window是一个全局对象，因此不太可能引起混乱。坦白的说，我写这个文章之前，我不知道location是全局变量。所以，我的建议是使用window.location。
这是我个人的偏好顺序：
当前这只是我的喜好。没有最好的方法，最好的方法始终是最适合您和您的团队的方法。
window.location方法
| window.location | |
|---|---|
| .assign() | 导航到给定的URL |
| .replace() | 导航到给定的URL，并且从会话历史记录中删除当前页面 |
| .reload() | 重新加载当前页面 |
| .toString() | 返回URL字符串 |
window.location.toString
MDN的定义：
这个方法返回URL的USVString。它是Location.href的只读版本。
换句话说，你可以使用这个方法获得href值：
至于使用哪个，我找不到更多关于哪个更好的信息。但是我确实找到了性能测试的区别。
注意这个速度测试是基于一个特定的浏览器。不同的浏览器和版本将呈现不同的结果。 我使用的是Chrome，因此href要快于其余的，href就是我使用的那个。我也认为它比toString快。显然，href是直接提供了URL，但是toString看起来像是被转换成了字符串。
assign VS replace
这两个方法都可以重定向或导航到另一个URL。区别在于assign会将当前页面保存在历史记录中，用户可以使用“后退”按钮导航到该页面。而使用replace方法时，不会保存它。 困惑？ 没问题，我也是。 让我们来看一个例子。
如何进行页面重定向
三种方法：
它们的区别在于浏览器的历史记录。href和assign一样，会将当前页面保存在历史记录中，但是replace不会。因此，如果您希望创建一种导航无法按回原始页面的体验，请使用replace。
所以现在问题是href和assign的区别。我觉得在使用上这取决于个人喜好。我更喜欢assign，因为它是一个方法，所以感觉好像我正在执行一些操作， 还有一个额外的好处是它更易于测试。 我一直在编写许多Jest测试，因此通过使用一种方法，使其更易于mock。
