1. 程式人生 > >Vue 的路由實現 Hash模式 和 History模式

Vue 的路由實現 Hash模式 和 History模式

結構 router ace 路徑 對象 forward 實現 由於 替換

Hash 模式:

Hash 模式的工作原理是onhashchange事件,Window對象可以監聽這個事件...

可以通過改變路徑的哈希值,來實現歷史記錄的保存,發生變化的hash 都會被瀏覽器給保存下來,所以下次盡管瀏覽器沒有請求服務器,但是還是將頁面和url 給關聯起來,這就是所謂的前端路由。

每次或者了哈希值,就知道路徑,知道路徑,就能獲得路由組建,有了路由組建,就可以將頁面顯示出來。

History 模式:

通過瀏覽器保存歷史路徑,由於Hash模式,每次只能改變#後面的路徑參數,history 則給予了前端路由完全的自由。

通過api 取訪問歷史路徑,history,back(),forward(),go(),實現了頁面的回退,前進,以及跳轉,

在vue.js中也可以用$router.push(url), $router.replace(),$router.back(),

$router.push(url) 是一層一層退,(數據結構是棧)

$router.replace,是直接替換它不會向 history 添加新記錄。

Vue 的路由實現 Hash模式 和 History模式