淺析前端路由簡介以及vue-router實現原理

路由這個概念最先是后端出現的。在以前用模板引擎開發頁面時，經常會看到這樣

http://www.xxx.com/login

大致流程可以看成這樣：

1. 瀏覽器發出請求
2. 服務器監聽到80端口（或443）有請求過來，并解析url路徑
3. 根據服務器的路由配置，返回相應信息（可以是 html 字串，也可以是 json 數據，圖片等）
4. 瀏覽器根據數據包的 Content-Type 來決定如何解析數據

簡單來說路由就是用來跟后端服務器進行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。

前端路由

1. hash 模式

隨著 ajax 的流行，異步數據請求交互運行在不刷新瀏覽器的情況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應用。單頁應用不僅僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，為了實現單頁應用，所以就有了前端路由。 類似于服務端路由，前端路由實現起來其實也很簡單，就是匹配不同的 url 路徑，進行解析，然后動態的渲染出區域 html 內容。但是這樣存在一個問題，就是 url 每次變化的時候，都會造成頁面的刷新。那解決問題的思路便是在改變 url 的情況下，保證頁面的不刷新。在 2014 年之前，大家是通過 hash 來實現路由，url hash 就是類似于：

http://www.xxx.com/#/login

這種 #。后面 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發 hashchange 這個事件，通過這個事件我們就可以知道 hash 值發生了哪些變化。然后我們便可以監聽 hashchange 來實現更新頁面部分內容的操作：

function matchAndUpdate () {
 // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年后，因為HTML5標準發布。多了兩個 API， pushState 和 replaceState ，通過這兩個 API 可以改變 url 地址且不會發送請求。同時還有 popstate 事件。通過這些就能用另一種方式來實現前端路由了，但原理都是跟 hash 實現相同的。用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但因為沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務器發送請求。為了避免出現這種情況，所以這個實現需要服務器的支持，需要把所有路由都重定向到根頁面。

function matchAndUpdate () {
 // todo 匹配路徑 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

Vue router 實現

我們來看一下 vue-router 是如何定義的：

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
 mode: 'history',
 routes: [...]
})
new Vue({
 router
 ...
})

可以看出來 vue-router 是通過 Vue.use 的方法被注入進 Vue 實例中，在使用的時候我們需要全局用到 vue-router 的 router-view 和 router-link 組件，以及 this.$router/$route 這樣的實例對象。那么是如何實現這些操作的呢？下面我會分幾個章節詳細的帶你進入 vue-router 的世界。(閱讀源碼是有點枯燥，但是帶著問題去了解，就感覺很有意思。如果你對 vue-router 的實現機制也存在一些疑問，可以一起探討交流)

vue-router 實現 -- install

vue-router 實現 -- new VueRouter(options)

vue-router 實現 -- HashHistory

未完待續...

更多 blog

總結

以上所述是小編給大家介紹的前端路由簡介以及vue-router實現原理，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com