後端路由簡介

路由這個觀點最先是後端湧現的。在之前用模板引擎開闢頁面時，常常會看到如許

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

未完待續…