更新時間:2021-12-16 來源:黑馬程序員 瀏覽量:
vue-router是Vue官方推出的路由管理器,主要用于管理URL,實現(xiàn)URL和組件的對應(yīng),以及通過URL進行組件之間的切換,從而使構(gòu)建單頁面應(yīng)用變得更加簡單。
單頁面應(yīng)用(SPA)的核心思想之一,就是更新視圖而不重新請求頁面,簡單來說,它在加載頁面時,不會加載整個頁面,只會更新某個指定的容器中的內(nèi)容。對于大多數(shù)單頁面應(yīng)用,都推薦使用官方支持的vue-router。
在實現(xiàn)單頁面前端路由時,提供了兩種方式,分別是hash模式和history模式,根據(jù)mode參數(shù)來決定采用哪一種方式。
vue-router默認為hash模式,使用URL的hash來模擬一個完整的URL,當URL改變時,頁面不會重新加載。#就是hash符號,中文名為哈希符或者錨點,在hash符號后的值稱為hash值。
路由的hash模式是利用了window 可以監(jiān)聽onhashchange事件來實現(xiàn)的,也就是說hash值是用來指導瀏覽器動作的,對服務(wù)器沒有影響,HTTP請求中也不會包括hash值,同時每一次改變hash值,都會在瀏覽器的訪問歷史中增加一個記錄,使用“后退”按鈕,就可以回到上一個位置。所以,hash模式是根據(jù)hash值來發(fā)生改變,根據(jù)不同的值,渲染指定DOM位置的不同數(shù)據(jù)。
hash模式的URL中會自帶#號,影響URL的美觀,而history模式不會出現(xiàn)#號,這種模式充分利用了history.pushState()來完成URL的跳轉(zhuǎn),而且無須重新加載頁面。使用history模式時,需要在路由規(guī)則配置中增加mode:'history',實例代碼如下:
提示:
// main.js 文件 const router = new VueRouter ({ mode:'history', routes: [...] })
HTML5中history有兩個新增的API,分別是history.pushState()和history.replaceState(),它們都接收3個參數(shù),即狀態(tài)對象(state object)、標題(title)和地址(URL)。下面我們就簡單介紹這3個參數(shù)的含義。
(1)狀態(tài)對象(state object):一個JavaScript對象,與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。
(2)標題(title):FireFox瀏覽器目前會忽略該參數(shù)。為了安全性考慮,建議傳一個空字符串?;蛘咭部梢詡魅胍粋€簡短的標題,標明將要進入的狀態(tài)。
(3)地址(URL):新的歷史記錄條目的地址。
猜你喜歡: