首先控制打印看一下
1. location属性
console.log(location)
location是挂在window的对象也是document下的对象
window.location
document.location
location
// 指的是同一个
以下方的url地址为例测试location
http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most
- Location.href
包含整个URL地址返回
href: "http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most"
当location.href赋值时会跳转
location.href = 'http://www.baidu.com'
// 跳转
- Location.protocol
包含URL对应协议 http 或者https,最后有一个":"。
protocol: "http:"
- Location.host
包含了域名,可能在该串最后带有一个":"并跟上URL的端口号。
host: "127.0.0.1:8848"
- Location.hostname
包含URL域名
hostname: "127.0.0.1"
- Location.port
包含端口号。
port: "8848"
- Location.pathname
包含URL中路径部分,开头有一个“/"。
pathname: "/testshare/location.html"
- Location.search
包含URL参数,开头有一个“?”。
search: "?lang=en&name=zhangsan"
- Location.hash
包含块标识符,开头有一个“#”。 哈希值 vue-router中的哈希模式就是用这个。
hash: "#test/most"
- Location.origin 只读
包含页面来源的域名,也是从哪个页面跳转来的
origin: "http://127.0.0.1:8848"
全部打印结果为
2. location的方法
- Location.reload()
Location.reload()
方法用来刷新当前页面。该方法只有一个参数,当值为 true
时,将强制浏览器从服务器加载页面资源,当值为 false
或者未传参时,浏览器则可能从缓存中读取页面。
location.reload(true);
// 无缓存刷新页面(但页面引用的资源还是可能使用缓存,
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求)
Location.assign()
Location.assign()方法会触发窗口加载并显示指定的URL的内容
document.location.assign('https://www.baidu.com');
Location
.replace()
Location
.replace()
方法以给定的URL来替换当前的资源。 与assign()
方法 不同的是,调用 replace()
方法后,当前页面不会保存到会话历史中(session History
),这样,用户点击回退按钮时,将不会再跳转到该页面。
document.location.replace('https://www.baidu.com');