在new vueRouter的時(shí)候我們可以傳入一個(gè)mode屬性，他可以接收三個(gè)值：hash/history/abstract
hash和history的區(qū)別
history的路徑更美觀一點(diǎn) 比如http://yoursite.com/user/id,history是基于pushState()來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。 但是強(qiáng)制刷新還是會(huì)有問題（服務(wù)端來解決這個(gè)問題），所以history模式需要后端人員配合使用。
hash的路徑會(huì)帶有#,比如http://yoursite.com#/user/id
HashHistory
|
1
2
3
4
5
6
7
|
class VueRouter{ constructor(options){ this.matcher = createMatcher(options.routes || []);//這里為了講解hash模式 所以就不進(jìn)行判斷用戶傳進(jìn)來的是哪種模式了 this.history = new HashHistory(this);//this vue-router的實(shí)例 }} |
源碼這里創(chuàng)建了一個(gè)基類我們這里和源碼統(tǒng)一，這個(gè)基類封裝了三種模式公用的方法和屬性,那么我們?cè)谶@里創(chuàng)建一個(gè)HashHistory和基類History
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import History from './base'// hash路由export default class HashHistory extends History{ constructor(router){ super(router); //繼承調(diào)用父類 等于call }}// 路由的基類export default class History { constructor(router){ this.router = router; }} |
如果是hash路由,打開網(wǎng)站如果沒有hash默認(rèn)應(yīng)該添加#/
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import History from './base';function ensureSlash(){ if(window.location.hash){ return } window.location.hash = '/'}export default class HashHistory extends History{ constructor(router){ super(router); ensureSlash(); // 確保有hash }} |
再看一下初始化的邏輯（上面的router.init函數(shù)）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
init(app){ const history = this.history; // 初始化時(shí)，應(yīng)該先拿到當(dāng)前路徑，進(jìn)行匹配邏輯 // 讓路由系統(tǒng)過度到某個(gè)路徑 const setupHashListener = ()=> { history.setupListener(); // 監(jiān)聽路徑變化 } history.transitionTo( // 父類提供方法負(fù)責(zé)跳轉(zhuǎn) history.getCurrentLocation(), // 子類獲取對(duì)應(yīng)的路徑 // 跳轉(zhuǎn)成功后注冊(cè)路徑監(jiān)聽，為視圖更新做準(zhǔn)備 setupHashListener )} |
這里我們要分別實(shí)現(xiàn) transitionTo(基類方法)、 getCurrentLocation 、setupListener
getCurrentLocation實(shí)現(xiàn)
|
1
2
3
4
5
6
7
8
9
|
function getHash(){ return window.location.hash.slice(1);}export default class HashHistory extends History{ // ... getCurrentLocation(){ return getHash(); }} |
setupListener實(shí)現(xiàn)
|
1
2
3
4
5
6
7
8
9
|
export default class HashHistory extends History{ // ... setupListener(){ window.addEventListener('hashchange', ()=> { // 根據(jù)當(dāng)前hash值 過度到對(duì)應(yīng)路徑 this.transitionTo(getHash()); }) }} |
TransitionTo實(shí)現(xiàn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
export function createRoute(record, location) { // {path:'/',matched:[record,record]} let res = []; if (record) { // 如果有記錄 while(record){ res.unshift(record); // 就將當(dāng)前記錄的父親放到前面 record = record.parent } } return { ...location, matched: res }}export default class History { constructor(router) { this.router = router; // 根據(jù)記錄和路徑返回對(duì)象,稍后會(huì)用于router-view的匹配 this.current = createRoute(null, { path: '/' }) } // 核心邏輯 transitionTo(location, onComplete) { // 去匹配路徑 let route = this.router.match(location); // 相同路徑不必過渡 if( location === route.path && route.matched.length === this.current.matched.length){ return } //更新路由并且下面會(huì)提到改變根實(shí)例上的_route屬性 this.updateRoute(route) onComplete && onComplete(); }} |
|
1
2
3
4
5
6
7
|
export default class VueRouter{ // ... //做一個(gè)代理 match(location){ return this.matcher.match(location); }} |
macth方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function match(location){ // 稍后根據(jù)路徑找到對(duì)應(yīng)的記錄 let record = pathMap[location] if (record) { // 根據(jù)記錄創(chuàng)建對(duì)應(yīng)的路由 //參數(shù)：/about/a:{path:xx,component...},path:'/about/a' return createRoute(record,{ path:location }) } // 找不到則返回空匹配 return createRoute(null, { path: location })} |
我們不難發(fā)現(xiàn)路徑變化時(shí)都會(huì)更改current屬性，我們可以把current屬性變成響應(yīng)式的，每次current變化刷新視圖即可
在install方法中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
install(Vue) { Vue.mixin({ // 給所有組件的生命周期都增加beforeCreate方法 beforeCreate() { if (this.$options.router) { //調(diào)用Vue類中雙向數(shù)據(jù)綁定方法 Vue.util.defineReactive(this,'_route',this._router.history.current); } } }); // $route和$router方法 這兩個(gè)方法僅僅是vue中最常見的代理 僅僅是為了更加方便 Object.defineProperty(Vue.prototype,'$route',{ // 每個(gè)實(shí)例都可以獲取到$route屬性 get(){ return this._routerRoot._route;//上面剛進(jìn)行雙向數(shù)據(jù)綁定的 } }); Object.defineProperty(Vue.prototype,'$router',{ // 每個(gè)實(shí)例都可以獲取router實(shí)例 get(){ return this._routerRoot._router; } }) } |
切換路由每次初始化時(shí)都需要調(diào)用更新_route的方法，因?yàn)閕nstall的時(shí)候把_route進(jìn)行雙向數(shù)據(jù)綁定，剛進(jìn)來是沒有this._router.history.current的，通過發(fā)布訂閱方式來進(jìn)行訂閱和更新操作；在init方法中增加監(jiān)聽函數(shù)
|
1
2
3
|
history.listen((route) => { // 需要更新_route屬性，出入一個(gè)函數(shù) app._route = route}); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export default class History { constructor(router) { // ... this.cb = null; } listen(cb){ this.cb = cb; // 注冊(cè)函數(shù) } updateRoute(route){ this.current =route; this.cb && this.cb(route); // 更新current后 更新_route屬性 }} |
以上就是詳解vue的hash跳轉(zhuǎn)原理的詳細(xì)內(nèi)容，更多關(guān)于vue的hash跳轉(zhuǎn)原理的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://segmentfault.com/a/1190000039369103
