快捷導(dǎo)航

Vue中如何把hash模式改為history模式

更新時(shí)間：2022年07月27日 09:58:18 作者：半開半落

這篇文章主要介紹了Vue中如何把hash模式改為history模式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

把hash模式改為history模式

如上圖所示非常簡(jiǎn)單

只需要在文件router下的index.js里加上一個(gè)mode:'history’即可把hash模式改為history模式.這個(gè)時(shí)候url上面的#號(hào)就不會(huì)再存在了,這樣就把url成功把hash模式改成history了

關(guān)于路由hash和history模式

hash模式

hash 就是指 url 后的 # 號(hào)以及后面的字符，

比如，http://127.0.0.1:5500/test.html#/user，這里的hash值就是#/user。

hash 值的變化不會(huì)導(dǎo)致瀏覽器像服務(wù)器發(fā)送請(qǐng)求

hash 的改變會(huì)觸發(fā) hashChange 事件，瀏覽器的前進(jìn)后退也能對(duì)其進(jìn)行控制

<!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模式的實(shí)現(xiàn)</title>
</head>
<body>
  <button id="myBtn">改變hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
      // 通過(guò) 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>

上面是通過(guò) on 來(lái)監(jiān)聽事件，其實(shí)也可以用

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

改變hash的三種方式：

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

控制臺(tái)的輸出

第二種方式：手動(dòng)點(diǎn)擊前進(jìn)后退按鈕

這里是點(diǎn)擊了后退按鈕，從 #/user 后退到了 #/

第三種方式：通過(guò)js代碼修改

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

  <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#/，

然后點(diǎn)擊按鈕

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

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

用一個(gè)網(wǎng)址來(lái)演示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'

對(duì)于href屬性

history 模式

默認(rèn)情況下, 路徑的改變使用的URL的hash.

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

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

history 模式，每訪問(wèn)一個(gè)頁(yè)面都要發(fā)起網(wǎng)絡(luò)請(qǐng)求，每個(gè)請(qǐng)求都需要服務(wù)器進(jìn)行路由匹配、數(shù)據(jù)庫(kù)查詢、生成HTML文檔后再發(fā)送響應(yīng)給瀏覽器，這個(gè)過(guò)程會(huì)消耗服務(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模式的實(shí)現(xiàn)</title>
</head>
<body>
  <button id="myBtn">改變hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
    window.addEventListener('DOMContentLoaded',() => {
      //頁(yè)面DOM加載完畢后打印出頁(yè)面的路徑
      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)點(diǎn)擊了按鈕之后，路由變成了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)對(duì)象

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

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

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

history

在修改 url 后，雖然頁(yè)面并不會(huì)刷新，但我們?cè)谑謩?dòng)刷新，或通過(guò) url 直接進(jìn)入應(yīng)用的時(shí)候，服務(wù)端是無(wú)法識(shí)別這個(gè) url 的，會(huì)報(bào) 404 問(wèn)題。

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

popstate

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

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

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

二者對(duì)比

1.從兼容角度分析。

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

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

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

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

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

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

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

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

您可能感興趣的文章: