vue-router工作原理：hash模式和history模式介紹

vue-router是Vue官方推出的路由管理器，主要用于管理URL，實(shí)現(xiàn)URL和組件的對(duì)應(yīng)，以及通過URL進(jìn)行組件之間的切換，從而使構(gòu)建單頁面應(yīng)用變得更加簡單。

vue-router的工作原理

單頁面應(yīng)用(SPA)的核心思想之一，就是更新視圖而不重新請(qǐng)求頁面，簡單來說，它在加載頁面時(shí)，不會(huì)加載整個(gè)頁面，只會(huì)更新某個(gè)指定的容器中的內(nèi)容。對(duì)于大多數(shù)單頁面應(yīng)用，都推薦使用官方支持的vue-router。

在實(shí)現(xiàn)單頁面前端路由時(shí)，提供了兩種方式，分別是hash模式和history模式，根據(jù)mode參數(shù)來決定采用哪一種方式。

1. hash模式

vue-router默認(rèn)為hash模式，使用URL的hash來模擬一個(gè)完整的URL，當(dāng)URL改變時(shí)，頁面不會(huì)重新加載。#就是hash符號(hào)，中文名為哈希符或者錨點(diǎn)，在hash符號(hào)后的值稱為hash值。

路由的hash模式是利用了window 可以監(jiān)聽onhashchange事件來實(shí)現(xiàn)的，也就是說hash值是用來指導(dǎo)瀏覽器動(dòng)作的，對(duì)服務(wù)器沒有影響，HTTP請(qǐng)求中也不會(huì)包括hash值，同時(shí)每一次改變hash值，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄，使用“后退”按鈕，就可以回到上一個(gè)位置。所以，hash模式是根據(jù)hash值來發(fā)生改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)。

2. history模式

hash模式的URL中會(huì)自帶#號(hào)，影響URL的美觀，而history模式不會(huì)出現(xiàn)#號(hào)，這種模式充分利用了history.pushState()來完成URL的跳轉(zhuǎn)，而且無須重新加載頁面。使用history模式時(shí)，需要在路由規(guī)則配置中增加mode:'history'，實(shí)例代碼如下：

提示：

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

HTML5中history有兩個(gè)新增的API，分別是history.pushState()和history.replaceState(),它們都接收3個(gè)參數(shù)，即狀態(tài)對(duì)象(state object)、標(biāo)題(title)和地址(URL)。下面我們就簡單介紹這3個(gè)參數(shù)的含義。

(1)狀態(tài)對(duì)象(state object)：一個(gè)JavaScript對(duì)象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。

(2)標(biāo)題(title)：FireFox瀏覽器目前會(huì)忽略該參數(shù)。為了安全性考慮，建議傳一個(gè)空字符串?；蛘咭部梢詡魅胍粋€(gè)簡短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。

(3)地址(URL)：新的歷史記錄條目的地址。

猜你喜歡：

vue組件三大部分： template、script、style

Vue生命周期總共分為幾個(gè)階段?

vue全家桶是指什么？有哪些東西？

傳智教育前端開發(fā)培訓(xùn)課程