vue-router是什么？

vue-router的工作原理

vue-router是Vue官方推出的路由管理器，主要用于管理URL，實現(xiàn)URL和組件的對應(yīng)，以及通過URL進行組件之間的切換，從而使構(gòu)建單頁面應(yīng)用變得更加簡單。這篇文章針對vue-router對應(yīng)的工作原理進行詳細講解。

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

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

1. hash模式

vue-router默認為hash模式，使用URL的 hash來模擬一個完整的URL，當URL改變時，頁面不會重新加載。#就是hash符號，中文名為哈希符或者錨點，在hash符號后的值稱為hash值。

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

2. history模式

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

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