首先控制打印看一下
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');