浏览器中location详解
浏览器中location详解
window.location对象用于获取当前页面的URL信息。
属性解析
1. href
当前页面的URL。
比如访问github.com，在控制台中输入location.href，则结果如下所示
https://github.com/
对href赋值可以进行URL跳转：
-
不携带协议，访问的当前域名对应的资源:
在控制台中输入
location.href = '/asset'，那么就会跳转到https://github.com/asset。 -
携带协议的话就跳转到新
URL:
在控制台中输入location.href = 'http://localhost:8080'，那么就会跳转到http://localhost:8080。
其他用法：
top.location.href=”url” 在顶层页面打开url（跳出框架）
self.location.href=”url” 仅在本页面打开url地址
parent.location.href=”url” 在父窗口打开Url地址
在页面中我们可能会嵌套一些iframe，以上top，self，parent就可以改变iframe中地址。
2. pathname
当前资源的路径。
比如访问github.com/vuejs，在控制台中输入location.pathname，则结果如下所示
/vuejs
对pathname赋值可以进行访问其他资源，跟href传入不带协议的用法相同，但是不会处理协议。
在控制台中输入location.pathname = 'http://localhost:8080'，访问的是github.com/vuejs/http:/localhost/asset。
3. host
当前页面域名，可能在该串最后带有一个:并跟上 URL 的端口号。
访问github.com，在控制台中输入location.host，结果如下所示：
github.com
访问localhost:8080，结果如下所示:
localhost:8080
对host赋值替换掉当前访问的域名，但是后边的资源路径并不会变
当前页面域名https://github.com/vuejs
在控制台中输入location.host = 'localhost:8080'，当前域名会变成https://localhost:8080/about。同样不解析协议。
4. hostname
当前页面域名（不包含端口号）
访问github.com，在控制台中输入location.hostname，结果如下所示：
github.com
访问localhost:8080，结果如下所示:
localhost
对hostname赋值替换掉当前访问的域名，但是后边的资源路径并不会变
当前页面域名https://github.com/vuejs
在控制台中输入location.host = 'localhost:8080'，当前域名会变成https://localhost:8080/about。同样不解析协议。
5. port
当前页面域名端口号.
访问github.com，在控制台中输入location.port，结果如下所示：
''
访问localhost:8080，结果如下所示:
8080
对port赋值替换掉当前访问的域名的端口，其他的并不会变
6. origin
当前页面来源的域名的标准形式。
访问github.com/vuejs，在控制台中输入location.origin，结果如下所示：
https://github.com
访问localhost:8080，结果如下所示:
http://localhost:8080
赋值并不会进行跳转
7. protocol
当前页面域名协议。
访问github.com/vuejs，在控制台中输入location.protocol，结果如下所示：
https:
赋值中如果没有协议或者不是标准域名形式都会报错
8. hash
包含页面URL标识中的 # 和后面 URL片段标识符
访问github.com，在控制台中输入location.hash，结果如下所示：
''
访问localhost:8080/#/about，结果如下所示:
#/about
通常在hash路由模式中使用到，而history模式则无用。
赋值会替换掉#后的字符
9. search
当前页面URL中?字符后面的查询参数。
在hash和history模式中，查询参数的获取并不同。
在history中，通过search获取。访问https://github.com/search?q=vue&type=，在控制台中输入location.search，结果如下所示：
?q=vue&type=
而在hash中，search则为空，#后边的全部字符都在hash属性中。访问http://localhost:8080/#/about?id=1，结果:
hash: '#/about?id=1',
search: ''
history模式中赋值会替换掉？后的字符，而hash模式直接插入到#字符前面
方法
1. reload
location.reload()
用来刷新当前页面，就像刷新按钮一样。
2. replace
location.replace(url);
替换当前页面的URL，不过当前页面不会保存到会话历史中。这样，用户点击回退按钮时，将不会再跳转到该页面。
3. assign
location.assign(url);
加载新文档