Vue Router
Vue Router 是 Vue.js 官方的路由管理器病线。
包含的功能有：
嵌套的路由/視圖表
模塊化的伺糠、基于組件的路由配置
路由參數(shù)伯病、查詢柜候、通配符
基于 Vue.js 過(guò)渡系統(tǒng)的視圖過(guò)渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動(dòng)激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)
自定義的滾動(dòng)條行為
1.vue-router實(shí)現(xiàn)原理
vue-router 提供了三種運(yùn)行模式：
● hash: 使用 URL hash 值來(lái)作路由灰羽。默認(rèn)模式驮履。
● history: 依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式廉嚼。
● abstract: 支持所有 JavaScript 運(yùn)行環(huán)境玫镐，如 Node.js 服務(wù)器端
- hash 模式
隨著 ajax 的流行，異步數(shù)據(jù)請(qǐng)求交互運(yùn)行在不刷新瀏覽器的情況下進(jìn)行怠噪。而異步交互體驗(yàn)的更高級(jí)版本就是 SPA —— 單頁(yè)應(yīng)用恐似。單頁(yè)應(yīng)用不僅僅是在頁(yè)面交互是無(wú)刷新的，連頁(yè)面跳轉(zhuǎn)都是無(wú)刷新的傍念，為了實(shí)現(xiàn)單頁(yè)應(yīng)用矫夷，所以就有了前端路由葛闷。
類似于服務(wù)端路由，前端路由實(shí)現(xiàn)起來(lái)其實(shí)也很簡(jiǎn)單双藕，就是匹配不同的 url 路徑淑趾，進(jìn)行解析，然后動(dòng)態(tài)的渲染出區(qū)域 html 內(nèi)容忧陪。但是這樣存在一個(gè)問(wèn)題治笨，就是 url 每次變化的時(shí)候，都會(huì)造成頁(yè)面的刷新赤嚼。那解決問(wèn)題的思路便是在改變 url 的情況下，保證頁(yè)面的不刷新顺又。在 2014 年之前更卒，大家是通過(guò) hash 來(lái)實(shí)現(xiàn)路由，url hash 就是類似于：
http://www.xxx.com/#/login
這種 #稚照。后面 hash 值的變化蹂空，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求果录，也就不會(huì)刷新頁(yè)面上枕。另外每次 hash 值的變化，還會(huì)觸發(fā)hashchange 這個(gè)事件弱恒，通過(guò)這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化辨萍。然后我們便可以監(jiān)聽(tīng)hashchange來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作：
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)
- history 模式
14年后，因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布返弹。多了兩個(gè) API锈玉，pushState 和 replaceState，通過(guò)這兩個(gè) API 可以改變 url 地址且不會(huì)發(fā)送請(qǐng)求义起。同時(shí)還有 popstate 事件拉背。通過(guò)這些就能用另一種方式來(lái)實(shí)現(xiàn)前端路由了，但原理都是跟 hash 實(shí)現(xiàn)相同的默终。用了 HTML5 的實(shí)現(xiàn)椅棺，單頁(yè)路由的 url 就不會(huì)多出一個(gè)#，變得更加美觀齐蔽。但因?yàn)闆](méi)有 # 號(hào)两疚，所以當(dāng)用戶刷新頁(yè)面之類的操作時(shí)，瀏覽器還是會(huì)給服務(wù)器發(fā)送請(qǐng)求含滴。為了避免出現(xiàn)這種情況鬼雀，所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁(yè)面蛙吏。
function matchAndUpdate () {
// todo 匹配路徑 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
3.abstract模式
abstract模式是使用一個(gè)不依賴于瀏覽器的瀏覽歷史虛擬管理后端源哩。
根據(jù)平臺(tái)差異可以看出鞋吉，在 Weex 環(huán)境中只支持使用 abstract 模式。 不過(guò)励烦，vue-router 自身會(huì)對(duì)環(huán)境做校驗(yàn)谓着，如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API，vue-router 會(huì)自動(dòng)強(qiáng)制進(jìn)入 abstract 模式坛掠，所以 在使用 vue-router 時(shí)只要不寫(xiě) mode 配置即可赊锚，默認(rèn)會(huì)在瀏覽器環(huán)境中使用 hash 模式，在移動(dòng)端原生環(huán)境中使用 abstract 模式屉栓。 （當(dāng)然舷蒲，你也可以明確指定在所有情況下都使用 abstract 模式）友多。
2.路由鉤子
vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過(guò)程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的域滥。
全局前置守衛(wèi)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用启绰。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中委可。
確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved着倾。
全局解析守衛(wèi)
在 2.5.0+ 你可以用 router.beforeResolve 注冊(cè)一個(gè)全局守衛(wèi)。這和 router.beforeEach 類似屈呕，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后虎眨，解析守衛(wèi)就被調(diào)用蟋软。
全局后置鉤子
router.afterEach((to, from) => {
// ...
})
你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是嗽桩，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：
路由獨(dú)享的守衛(wèi)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
你可以在路由配置上直接定義 beforeEnter 守衛(wèi)：
這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的
組件內(nèi)的守衛(wèi)
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
// 不岳守！能！獲取組件實(shí)例 `this`
// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前碌冶，組件實(shí)例還沒(méi)被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變湿痢，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候譬重，
// 由于會(huì)渲染同樣的 Foo 組件拒逮，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用臀规。
// 可以訪問(wèn)組件實(shí)例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
// 可以訪問(wèn)組件實(shí)例 `this`
}
}
完整的導(dǎo)航解析流程
導(dǎo)航被觸發(fā)滩援。
在失活的組件里調(diào)用離開(kāi)守衛(wèi)。
調(diào)用全局的 beforeEach 守衛(wèi)塔嬉。
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)玩徊。
在路由配置里調(diào)用 beforeEnter。
解析異步路由組件谨究。
在被激活的組件里調(diào)用 beforeRouteEnter恩袱。
調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
導(dǎo)航被確認(rèn)胶哲。
調(diào)用全局的 afterEach 鉤子畔塔。
觸發(fā) DOM 更新。
用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)纪吮。
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中萎胰。
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防御 XSRF
攔截器
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請(qǐng)求之前做些什么
return config;
}, function (error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (error) {
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error);
});
如果你想在稍后移除攔截器碾盟，可以這樣：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
與ajax區(qū)別
Ajax：
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)技竟。
Ajax = 異步 JavaScript 和 XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）冰肴。
Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下榔组，能夠更新部分網(wǎng)頁(yè)的技術(shù)熙尉。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新搓扯。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下检痰，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容锨推，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面铅歼。
// 理論無(wú)技巧，想過(guò)全靠死記换可。
