快捷導(dǎo)航

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

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

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

前言

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

簡單介紹 Vue Router

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

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

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

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

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

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

Vue Router 實現(xiàn)原理

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

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

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

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

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

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

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

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

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

Hash 模式和 History 模式；

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

Hash

簡述

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

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

特點

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

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

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

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

url 帶一個 # 號。

設(shè)置

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

history

簡述

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

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

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

設(shè)置

特點

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

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

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

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

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

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