JS的history和location用法；react路由的history對象的插件history的使用介紹

一、什麼是location

首先介紹的是location對象，location是BOM對象中最常用的一個對象之一，它提供了與當前窗口中加載的文檔的有關的信息，還提供了一些導航的功能。說到這裏，其實location是一個非常的特別的對象，因爲window.location===document.location.另外location對解析URL非常的有幫助，下面看一下location的屬性表。

http://www.google.com:8080/loanOrder/detail?orderId=1236#type

 

屬性名	例子	說明
hash	"#type"	設置或返回URL中的#後面的hash值，如果沒有則爲""
host	"www.google.com:8080"	設置或返回URL中的主機名稱和端口號
hostName	"www.google.com"	設置或返回URL中的主機名稱
href	"http://www.google.com:8080/loanOrder/detail?orderId=1236#type"	設置或返回完整的URL
pathname	"/loanOrder/detail"	設置或返回當前 URL 的路徑部分
port	"8080"	設置或返回URL中的端口號，如果URL中沒有端口號，則爲""
protocol	"http:"	設置或返回當前 URL 的協議，通常是http:或https:
search	"?orderId=1236"	返回URL的查詢字符串。這個字符串以"?"開頭

JS中的用法：

1.查詢字符串參數

function getArgsQuery() {
        //取得查詢字符串並去掉"?"
        var searchStr=window.location.search.length>0?window.location.search.substring(1):"";
        //將每一項集成到數組中
        var searchStrArray=searchStr.length>0?searchStr.split("&"):[];
        //存儲最後返回的對象
        var args={};
        searchStrArray.forEach(function (item) {
            //屬性
            var name=decodeURIComponent(item.split("=")[0]);
            //值
            var value=decodeURIComponent(item.split("=")[1]);
            args[name]=value;
        });
        return args;
    }

2.改變瀏覽器的位置

1) window.location.reload() //重新加載頁面

在調用reload()不傳任何參數時，頁面自上次請求以來並沒有改變過，頁面就會從遊覽器緩存中加載，如果傳入參數true時，頁面會強制從服務器重新加載。

例：
 window.location.reload()  //重新加載（有可能從緩存中加載）
 window.location.reload(true) //重新加載(從服務器重新加載)

2) window.location.assign(url); //加載新的文檔

與 window.location.assign(url)效果一樣的還有

 - window.location.href=url;
 - window.location=url;

3) window.location.replace(url); //用新文檔替換當前文檔

 

同樣是加載新文檔，區別就是window.location.assign(url)是可以從新文檔再回到當前文檔，但是window.location.replace(url)就不行了，用來實現過渡頁面時非常好用，但是有些webview卻是不支持的，比如小編在開發的釘釘上的微應用的時候就遇到這個，這時我們該如何做呢？下面就是我們講到的history對象。

二、History 

History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的原因，History 對象不再允許腳本訪問已經訪問過的實際 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

    
    window.history.go(-2);  //後退兩頁   
    window.history.go(-1);  //後退一頁   
    window.history.go(1);   //前進一頁
    window.history.go(2);   //前進兩頁
   
    window.history.back();//後退一頁
    window.history.forward();//前進一頁

1) window.history.pushState(stateObject,title,url )

將當前URL和history.state加入到history中，並用新的state和URL替換當前，不會造成頁面刷新。

--參數解釋
stateObject    //與要跳轉到的URL對應的狀態信息，沒有特殊的情況下可以直接傳{}
title       //現在大多數瀏覽器不支持或者忽略這個參數，我們在用的時候建議傳一個空字符串
url            //這個參數提供了新歷史紀錄的地址,它不一定要是絕對地址，也可以是相對的，不可跨域

2) window.history.replaceState(stateObject,title,url)

用新的state和URL替換當前，不會造成頁面刷新。

--參數解釋
stateObject    //與要跳轉到的URL對應的狀態信息，沒有特殊的情況下可以直接傳{}
title       //現在大多數瀏覽器不支持或者忽略這個參數，我們在用的時候建議傳一個空字符串
url            //這個參數提供了新歷史紀錄的地址,它不一定要是絕對地址，也可以是相對的，不可跨域

/*
    可能還有其他的方法，如果有歡迎留言交流
    這裏我依舊拿https://www.lagou.com/gongsi/j35166.html舉例
    打開控制檯，輸入下面這段代碼。
*/
history.replaceState({name: "華爲"}, "", "j87078.html");
window.location.reload();

/*
執行完之後，我們發現不能回退了，是不是就跟window.location.replace()實現同樣的效果了。
*/

三、react路由的history對象的插件history的使用介紹

 

1. history插件的使用

   history這個插件可以方便管理你的瀏覽記錄
   cnpm install history --save
   import createHistory from 'history/createBrowserHistory'

2. 三種方法

   有三種使用方式
       createBrowserHistory 現代瀏覽器使用
           createBrowserHistory({
               basename: '', // 基鏈接
               forceRefresh: false, // 是否強制刷新整個頁面
               keyLength: 6, // location.key的長度
               getUserConfirmation: (message,callback) => callback(window.confirm(message)) // 跳轉攔截函數
           })
       createMemoryHistory 手機端使用
           createMemoryHistory({
               initialEntries: ['/'], // 初始載入路徑，和MemoryRouter中的initialEntries是一樣的
               initialIndex: 0, // initialEntries初始載入索引
               keyLength: 6, // location.key的長度
               getUserConfirmation: null // 路由跳轉攔截函數
           })
       createHashHistory 老版本瀏覽器使用，暫不介紹

3. 基本使用功能

   const history = createHistory(); 創建歷史對象
   const location = history.location; 獲取location對象
   const unlisten = history.listen( (location, action) => {
       console.log(location,action)
       // location是location對象
       // action是動作名稱，比如 "PUSH"
   } )
   history.push('/a', { some: 'state' }) // 強制跳轉
   unlisten() // 監聽解綁

4. history對象

   屬性：
       上面三種方法創建的history對象都有如下三個屬性
           history.length 歷史記錄的條數
           history.location 歷史記錄中的location對象
           history.action 當前的歷史記錄是通過什麼動作添加進來的，如 "PUSH"
       createMemoryHistory中提供了額外的兩個屬性
           history.index 當前歷史記錄的索引
           history.entries 歷史記錄
   方法
       listen方法
           history.listen( (location,action) => {
               console.log(location,action);
               // location就是window.location的一個子集
               // action可能的值，"PUSH", "REPLACE", "POP"
           } )

5. 使用history實現跳轉

   push    
       使用push可以將一條新的歷史記錄推送到歷史堆棧中
       history.push('/a');
       history.push('/a',{name: 'yejiawei'});
       history.push({
           pathname: '/a',
           state: {
               name: 'yejiawei'
           }
       });
   replace方法和push方法使用形式一樣，replace的作用是取代當前歷史記錄
   go，此方法用來前進或者倒退，history.go(-1);
   goBack，此方法用來回退，history.goBack();
   goForward，此方法用來前進，history.goForward();
   另外使用createMemoryHistory創建的history對象，有canGo方法，和go方法類似

6. 使用history實現路由跳轉警告

   const unblock = history.block('Do you want to leave?');
   上面這個用法，就是添加一個跳轉提示信息，默認使用dom環境的window.confirm，所以如果使用非dom環境的createMemoryHistory就要使用getUserConfirmation方法實現
   另外，除了傳遞一個字符串提示信息以外，還可以添加函數
   const unblock = history.block( (location,action) => {
       return 'do you leave?'
   } )
   可以通過直接調用，unblock(); 實現方法解綁

react部分轉自：

https://www.cnblogs.com/ye-hcj/p/7741742.html

以上來自自己疑問綜合多篇文章整理。如有侵權聯繫刪除，純屬學習筆記