vue-router實現原理的示例分析

這篇文章將為大家詳細講解有關vue-router實現原理的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

大致流程可以看成這樣：

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實現原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。