快捷導(dǎo)航

Vue前端路由hash與history差異深入了解

更新時(shí)間：2022年06月08日 14:19:57 作者：李白愛喝水

這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

沒了解這兩種路由前，不管是 vue還是 react 在項(xiàng)目創(chuàng)建時(shí)難免會(huì)進(jìn)行路由之間選擇，在 hash 和 history 難免會(huì)糾結(jié)一番,或者是直接稀里糊涂用了默認(rèn)帶 # 的 hash 路由，看完這篇分享,保準(zhǔn)讓你之后不會(huì)在為選擇哪中路由犯難,實(shí)現(xiàn)按需選擇。有疑問歡迎在評(píng)論區(qū)指出，大家一起溝通。

簡單介紹 Vue Router

Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。

vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。

傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的。

在 vue-router 單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。

路由模塊的本質(zhì) 就是建立起url和頁面之間的映射關(guān)系。

至于我們?yōu)槭裁床荒苡胊標(biāo)簽，這是因?yàn)橛肰ue做的都是單頁應(yīng)用，就相當(dāng)于只有一個(gè)主的 index.html 頁面，所以你寫的標(biāo)簽是不起作用的，你必須使用 vue-router 來進(jìn)行管理。

Vue Router 實(shí)現(xiàn)原理

在了解路由模式前，我們要先清楚，vue-roter 的實(shí)現(xiàn)原理是怎樣的，什么是單頁面應(yīng)用，特點(diǎn)是什么，這樣更容易加深對(duì)路由的理解。

SPA 單頁面及應(yīng)用方式:單一頁面應(yīng)用程序，只有一個(gè)完整的頁面；

它在第一次加載頁面時(shí),就將唯一完整的 html 頁面和所有其余頁面組件一起下載下來，這樣它在切換頁面時(shí)，不會(huì)加載整個(gè)頁面，而是只更新某個(gè)指定的容器中內(nèi)容。

單頁面應(yīng)用(SPA)的核心之一是: 更新視圖而不重新請(qǐng)求頁面。

路由器對(duì)象底層實(shí)現(xiàn)的三大步驟即

(1)監(jiān)視地址欄變化；

(2)查找當(dāng)前路徑對(duì)應(yīng)的頁面組件；

(3)將找到的頁面組件替換到 router-vieW 的位置。

vue-router 在實(shí)現(xiàn)單頁面前端路由時(shí)，提供了兩種方式：

Hash 模式和 History 模式；

vue2 是根據(jù) mode 參數(shù)來決定采用哪一種方式，vue3 則是 history 參數(shù)，下面我們將圍繞這個(gè)屬性進(jìn)行進(jìn)一步了解。

Hash

簡述

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁面不會(huì)重新加載。 hash（#）是 URL 的錨點(diǎn)，代表的是網(wǎng)頁中的一個(gè)位置，單單改變 # 后的部分，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置，不會(huì)重新加載網(wǎng)頁，也就是說 # 是用來指導(dǎo)瀏覽器動(dòng)作的，對(duì)服務(wù)器端完全無用，HTTP 請(qǐng)求中也不會(huì)不包括 # ，同時(shí)每一次改變 # 后的部分，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄，使用 "后退" 按鈕，就可以回到上一個(gè)位置，所以說 hash 模式通過錨點(diǎn)值的改變，根據(jù)不同的值，渲染指定 DOM 位置的不同數(shù)據(jù)。

# 符號(hào)本身以及它后面的字符稱之為 hash，可通過 window.location.hash 屬性讀取。

特點(diǎn)

hash 雖然出現(xiàn)在URL中，但不會(huì)被包括在 HTTP 請(qǐng)求中。它是用來指導(dǎo)瀏覽器動(dòng)作的，對(duì)服務(wù)器端完全無用，因此，改變 hash 不會(huì)重新加載頁面

可以為 hash 的改變添加監(jiān)聽事件：

window.addEventListener("hashchange", fncEvent, false)

每一次改變 hash（window.location.hash），都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄

url 帶一個(gè) # 號(hào)。

設(shè)置

vue3 設(shè)置 hash 模式路由

history

簡述

history 是路由的另一種模式，由于 hash 模式會(huì)在 url 中帶#，如果不想要帶 #的話，我們可以使用路由的 history 模式，只需要在響應(yīng)的 router 配置規(guī)則時(shí),加上即可，vue 的路由默認(rèn)是 hash 模式。

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

這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。

設(shè)置

特點(diǎn)

路由跳轉(zhuǎn)不需要重新加載頁面。

不帶 # 在大部分人看來要比 hash 路由好看許多。

兼容性沒有 hash 好，會(huì)在下面展開說明

生產(chǎn)環(huán)境問題及解決

當(dāng)我們把 history 項(xiàng)目部署到服務(wù)器中后,此時(shí)我們?cè)跒g覽器輸入一個(gè)網(wǎng)址(比如是 www.test.com[3] ), 此時(shí)會(huì)經(jīng)過 dns 解析，拿到 ip 地址后根據(jù) ip 地址向該服務(wù)器發(fā)起請(qǐng)求,服務(wù)器接受到請(qǐng)求后,然后返回相應(yīng)的結(jié)果(html,css,js)。

如果我們?cè)谇岸嗽O(shè)置了重定向，此時(shí)頁面會(huì)進(jìn)行跳轉(zhuǎn)到 www.test.com/home[4] ,在前端會(huì)進(jìn)行匹配對(duì)應(yīng)的組件然后將其渲染到頁面上。此時(shí)如果我們刷新頁面的話，瀏覽器會(huì)發(fā)送新的請(qǐng)求 www.test.com/home[5], 如果后端服務(wù)器沒有 /home 對(duì)應(yīng)的接口，那么就會(huì)返回404。