全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

vue router的模式有哪幾種?[vue router的工作原理]

更新時(shí)間:2021-12-16 來(lái)源:黑馬程序員 瀏覽量:

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


vue-router的工作原理

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

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

vue-router工作原理

1. hash模式

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

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


2. history模式

hash模式的URL中會(huì)自帶#號(hào),影響URL的美觀(guān),而history模式不會(huì)出現(xiàn)#號(hào),這種模式充分利用了history.pushState()來(lái)完成URL的跳轉(zhuǎn),而且無(wú)須重新加載頁(yè)面。使用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)。下面我們就簡(jiǎn)單介紹這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è)簡(jiǎn)短的標(biāo)題,標(biāo)明將要進(jìn)入的狀態(tài)。

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


黑馬前端開(kāi)發(fā)課程



猜你喜歡:

vue組件由哪幾部分構(gòu)成?

怎樣在vue3.x中全局配置axios?

Vue常用的指令都有哪些?

黑馬程序員前端開(kāi)發(fā)培訓(xùn)課程

分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!