<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash模式的實現(xiàn)</title>
</head>
<body>
  <button id="myBtn">改變hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
      // 通過 onhashchange 監(jiān)聽hash值變化
    window.onhashchange = (e) => {
      console.log('老URL',e.oldURL);
      console.log('新URL',e.newURL);
      console.log('hash',location.hash);
    }
  </script>
</body>
</html>

上面是通過 on 來監(jiān)聽事件，其實也可以用

window.addEventListener("hashchange", funcRef, false);

改變hash的三種方式：

第一種：手動在導(dǎo)航欄中修改

控制臺的輸出

第二種方式：手動點擊前進后退按鈕

這里是點擊了后退按鈕，從 #/user 后退到了 #/

第三種方式：通過js代碼修改

給按鈕增加監(jiān)聽函數(shù)，當(dāng)點擊按鈕時，進行路由改變。

  <script>
    const myBtn = document.getElementById('myBtn');
    window.onhashchange = (e) => {
      console.log('老URL',e.oldURL);
      console.log('新URL',e.newURL);
      console.log('hash',location.hash);
    }
    // 增加監(jiān)聽函數(shù)
    myBtn.addEventListener('click',() => {
      location.href = '#/user';
    })
  </script>

起初，路由位于http://127.0.0.1:5500/test.html#/，

然后點擊按鈕

注：Location對象用于表示window上當(dāng)前鏈接到的URL信息。

href: 當(dāng)前window對應(yīng)的超鏈接URL, 整個URL；
hash: 哈希值；
pathname：訪問頁面；

用一個網(wǎng)址來演示location的屬性

//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb
location.protocal // 'http:'
localtion.hostname // '127.0.0.1'
location.host // '127.0.0.1:8001'
location.port //8001
location.pathname //'01-hash.html'
location.serach // '?a=100&b=20'
location.hash // '#/aaa/bbb'

對于href屬性

history 模式

默認情況下, 路徑的改變使用的URL的hash.

如果使用history模式，在配置路由規(guī)則時，加入"mode: ‘history’".

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

history 模式，每訪問一個頁面都要發(fā)起網(wǎng)絡(luò)請求，每個請求都需要服務(wù)器進行路由匹配、數(shù)據(jù)庫查詢、生成HTML文檔后再發(fā)送響應(yīng)給瀏覽器，這個過程會消耗服務(wù)器的大量資源，給服務(wù)器的壓力較大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history模式的實現(xiàn)</title>
</head>
<body>
  <button id="myBtn">改變hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
    window.addEventListener('DOMContentLoaded',() => {
      //頁面DOM加載完畢后打印出頁面的路徑
      console.log('path: ',location.pathname);
    })
    myBtn.addEventListener('click',() => {
      const state = {name:'user'};
      history.pushState(state, '', 'user');
      console.log('切換路由到了','user');
      console.log('path: ',location.pathname);
    })
  </script>
</body>
</html>

起初路由位于http://127.0.0.1:5500/test.html，

當(dāng)點擊了按鈕之后，路由變成了http://127.0.0.1:5500/user。

history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

history.pushState(); ? ? ? ? // 添加新的狀態(tài)到歷史狀態(tài)棧
history.replaceState(); ? ? ?// 用新的狀態(tài)代替當(dāng)前狀態(tài)
history.state ? ? ? ? ? ? ? ?// 返回當(dāng)前狀態(tài)對象

history.pushState() 在保留現(xiàn)有歷史記錄的同時，將 url 加入到歷史記錄中。
history.replaceState() 會將歷史記錄中的當(dāng)前頁面歷史替換為 url。

由于 history.pushState() 和 history.replaceState() 可以改變 url 同時，不會刷新頁面，所以在 HTML5 中的 histroy 具備了實現(xiàn)前端路由的能力。

這兩個方法有個共同的特點：當(dāng)調(diào)用他們修改瀏覽器歷史記錄棧后，雖然當(dāng)前 URL 改變了，但瀏覽器不會刷新頁面，這就為單頁應(yīng)用前端路由“更新視圖但不重新請求頁面”提供了基礎(chǔ)。

history

在修改 url 后，雖然頁面并不會刷新，但我們在手動刷新，或通過 url 直接進入應(yīng)用的時候，服務(wù)端是無法識別這個 url 的，會報 404 問題。

因為我們是單頁應(yīng)用，只有一個 html 文件，服務(wù)端在處理其他路徑的 url 的時候，就會出現(xiàn)404的情況。所以，如果要應(yīng)用 history 模式，需要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回單頁應(yīng)用的 html 文件。

popstate

在history模式中與hash模式的hashchange對應(yīng)的是popState。

popstate是在瀏覽器回退前進或者js的 back() go() forward()方法的時候才會觸發(fā)。

    //監(jiān)聽 popstate 事件
    window.onpopstate = (e) => {
      console.log('onpopstate', e.state, location.pathname);
    }

二者對比

1.從兼容角度分析。

hash 可以兼容到 IE8，history 只能兼容到 IE10。

2.從網(wǎng)絡(luò)請求的角度分析。

使用 hash 模式，地址改變時通過 hashchange 事件，只會讀取哈希符號后的內(nèi)容，并不會發(fā)起任何網(wǎng)絡(luò)請求。

history 模式，每訪問一個頁面都要發(fā)起網(wǎng)絡(luò)請求，每個請求都需要服務(wù)器進行路由匹配、數(shù)據(jù)庫查詢、生成HTML文檔后再發(fā)送響應(yīng)給瀏覽器，這個過程會消耗服務(wù)器的大量資源，給服務(wù)器的壓力較大。

3.服務(wù)器配置角度分析。

hash 不需要服務(wù)器任何配置。

history 進行刷新頁面時，無法找到url對應(yīng)的頁面，會出現(xiàn) 404 問題。如果要應(yīng)用 history 模式，需要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回單頁應(yīng)用的 html 文件。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: