前端浏览器URL路径处理

1、window.location

window.location.href     → 'https://localhost:8080/search?q=JS#comments' //包含整个 URL
               .origin   → 'https://localhost:8080' // 包含页面来源的域名的标准形式
               .protocol → 'https:' //协议
               .host     → 'localhost:8080'   //域名 + 端口
               .hostname → 'localhost:8080' //域名
               .port     → '' //端口
               .pathname → '/search/' //路径部分
               .search   → '?q=JS' //包含 URL 参数开头有一个`“?”`
               .hash     → '#comments' //包含块标识符开头有一个 `#`。

在写项目中的时候遇到过一个问题：通过我们公司项目(hash模式)与其他公司进行连接返回一个url路径 =>例如：localhost:3000/xxxxxx=xxxxxxxxxxxxxxxx#/login，然后需要处理掉路径中的xxxxxx=xxxxxxxxxxxxxxxx，刚开始想用route的形式去处理，但是拿不到这条路径，之后通过同事点拨，通过window.location的方式获取.origin、.pathname，然后把它们拼起来解决的这个问题。

1.1 window.location 属性一览表

.protocol协议 (http: 或 https:)
.host域名+端口号
.hostname域名
.port端口号
.pathname路径(以/开头)
.search查询字符串，以?开头
.hash页面锚点，以#开头
.href完整 URL

1.2 修改属性值

origin =>只读，其他值都可修改

window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'q=vue' // (不需要带 ?)
               .hash     = 'target' // (不需要带 #)
               .href     = 'https://localhost:8080'

2、如何访问Location对象

window。location返回Location类型的一个实例对象。可以通过一下几种方式访问：

window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location

推荐用window.location，这样一眼就可以看出用的是全局变量。

3、window.location 方法一览表

3.1、window.location.assign(‘url’)
加载给定 URL 的内容资源到这个 Location 对象所关联的对象上。
3.2、window.location.reload()
重新加载来自当前 URL 的资源。他有一个特殊的可选参数（默认为false），类型为布尔值，该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据，也会清除表单数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
3.3、window.location.replace()
用给定的 URL 替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。
3.4、window.location.toString()
返回一个DOMString，包含整个 URL。它和读取URLUtils.href的效果相同。但是用它是不能够修改 Location 的值的。
3.5、混淆点
<1>、.toString()和.href都是返回 URL，它们之间有区别吗？

• 结果是一样的，性能上稍微有点差别。
• href稍快，通过window.location拼接字符串的形式速度最慢。

<2>、assign() 和直接修改href是等价的，那么它们跟.replace()的区别是什么呢？

• assign()在跳转新地址的同时会留下当前页面的访问记录， 点击浏览器返回按钮会回到原来的页面，
• replace()则不会保留。

<3>、.assign()执行流程：

1. 打开空白页
2. 访问 www.kaysonli.com (当前页)
3. 加载新页面   `window.location.assign('https://www.w3schools.com')`
4. 点击浏览器返回按钮
5. 回到  www.kaysonil.com

<4>、.replace()执行流程：

1. 打开空白页
2. Go to www.kaysonli.com (当前页)
3. 加载新页面   `window.location.replace('https://www.w3schools.com')`
4. 点击浏览器返回按钮
5. 回到   空白页