頁面跳轉與瀏覽器記錄

location.href = url location.reload() location.replace(url)
url徹底不變的狀況下 刷新Docment,不會產生記錄 刷新Docment,不會產生記錄 刷新Docment,不會產生記錄
只改變hash 不會刷新Docment,會在瀏覽器產生記錄,可是若是連續改變hash,也會丟失記錄 是 不刷新Docment 也不產生記錄
改變url,只hash不算,hash從有到無算 刷新Document,會產生記錄,可是若是頁面加載時執行不會產生記錄,setTimeout裏面執行就會有記錄 刷新Document,不會產生記錄

問題1:

在頁面加載的時候直接location.href 到其餘的頁面,會在瀏覽器裏不留下當前頁面的記錄,
試驗用 setTimeout 0秒後再location.href 到其餘的頁面則會留下記錄。
因此再作頁面跳轉的時候若是不想留下記錄,仍是用replace比較保險,若是想留下記錄,應該setTimeout幾百毫秒再跳轉。瀏覽器

問題2:

經過瀏覽器的前進和後退到頁面,頁面的Document會從緩存中取,js從新執行。因此若是頁面的數據是從模板中下發的,
會致使回退回來的時候頁面的模板數據不會刷新。
解決方案緩存

var url = window.location.href;  
var ps = url.split("#");  
    try{  
        if(ps[1] != 1){  
            url += "#1";  
        }else{  
         //當訪問頁面的時候是有hash =1 證實是從別的url中過來的,因此replace成沒有hash的url(這裏就會刷新Document)
          window.location.replace(ps[0]);  
          return;
        }  
    }catch(ex){  
        url += "#1";  
    }       
   //頁面第一次進來的時候,沒有hash = 1,用replace加上hash,這樣在跳轉到其餘頁面再返回來的時候是帶着hash
    window.location.replace(url);

問題3:

頁面中當連續改變hash的時候,也會致使瀏覽器的歷史記錄會有丟失,因此快速切換hash也有問題。
可是有的需求是當進入頁面的時候須要馬上變成hash2,而後能夠點擊返回到hash1,
若是從頁面中直接從hash1變成hash2會發現hash1的記錄消失。
解決辦法 先用history.pushState 給瀏覽器添加一條記錄,而後用replace (hash2)的方法替換掉添加的記錄,這樣記錄裏存的就是hash1和hash2
解決方案this

history.pushState({},document.title, '#/order')
this.$router.replace({
      name: 'Edit'
})
相關文章
相關標籤/搜索