跟着前端運用的營業功用起來越龐雜，用戶關於運用體驗的要求越來越高，單面（SPA）成為前端運用的主流情勢。大型單頁運用最顯著特徵之一就是採納的前端路由體系，經由過程轉變URL，在不從新要求頁面的狀況下，更新頁面視圖。
更新視圖但不從新要求頁面，是前端路由道理的中心之一，現在在瀏覽器環境中這一功用的完成主要有2種體式格局：
- 應用
URL中的hash("#"); - 應用
History interface在HTML5中新增的要領;
vue-router是Vue.js框架的路由插件，它是經由過程mode這一參數掌握路由的完成形式的：
const router=new VueRouter({
mode:'history',
routes:[...]
})建立VueRouter的實例對象時，mode以組織參數的情勢傳入。
src/index.js
export default class VueRouter{
mode: string; // 傳入的字符串參數，指點history種別
history: HashHistory | HTML5History | AbstractHistory; // 現實起作用的對象屬性，必需是以上三個類的羅列
fallback: boolean; // 如瀏覽器不支撐，'history'形式需回滾為'hash'形式
constructor (options: RouterOptions = {}) {
let mode = options.mode || 'hash' // 默認為'hash'形式
this.fallback = mode === 'history' && !supportsPushState // 經由過程supportsPushState推斷瀏覽器是不是支撐'history'形式
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract' // 不在瀏覽器環境下運轉需強製為'abstract'形式
}
this.mode = mode
// 依據mode肯定history現實的類並實例化
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
init (app: any /* Vue component instance */) {
const history = this.history
// 依據history的種別實行相應的初始化操縱和監聽
if (history instanceof HTML5History) {
history.transitionTo(history.getCurrentLocation())
} else if (history instanceof HashHistory) {
const setupHashListener = () => {
history.setupListeners()
}
history.transitionTo(
history.getCurrentLocation(),
setupHashListener,
setupHashListener
)
}
history.listen(route => {
this.apps.forEach((app) => {
app._route = route
})
})
}
// VueRouter類暴露的以下要領現實是挪用詳細history對象的要領
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.push(location, onComplete, onAbort)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.history.replace(location, onComplete, onAbort)
}
}- 作為參數傳入的字符串屬性
mode只是一個標記，用來指點現實起作用的對象屬性history的完成類，二者對應關聯：
modehistory:
'history':HTML5History;
'hash':HashHistory;
'abstract':AbstractHistory;- 在初始化對應的
history之前，會對mode做一些校驗：若瀏覽器不支撐HTML5History體式格局(經由過程supportsPushState變量推斷)，則mode設為hash;若不是在瀏覽器環境下運轉，則mode設為abstract; -
VueRouter類中的onReady(),push()等要領只是一個代辦，現實是挪用的詳細history對象的對應要領，在init()要領中初始化時，也是依據history對象詳細的種別實行差別操縱
HashHistory
hash("#")標記的原本作用是加在URL指點網頁中的位置：
http://www.example.com/index.html#print#自身以及它背面的字符稱之為hash可經由過程window.location.hash屬性讀取.
-
hash雖然出現在url中，但不會被包含在http要求中，它是用來指點瀏覽器行動的，對服務器端完整無用，因而，轉變hash不會從新加載頁面。 - 可認為
hash的轉變增添監聽事宜：
window.addEventListener("hashchange",funcRef,false)- 每一次轉變
hash(window.location.hash)，都邑在瀏覽器接見汗青中增添一個紀錄。
應用hash的以上特徵，便能夠來完成前端路由”更新視圖但不從新要求頁面”的功用了。
HashHistory.push()
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(location, route => {
pushHash(route.fullPath)
onComplete && onComplete(route)
}, onAbort)
}
function pushHash (path) {
window.location.hash = path
}transitionTo()要領是父類中定義的是用來處置懲罰路由變化中的基礎邏輯的，push()要領最主要的是對window的hash舉行了直接賦值：
window.location.hash=route.fullPathhash的轉變會自動增添到瀏覽器的接見汗青紀錄中。
那末視圖的更新是怎樣完成的呢，我們來看看父類History中的transitionTo()要領：
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const route = this.router.match(location, this.current)
this.confirmTransition(route, () => {
this.updateRoute(route)
...
})
}
updateRoute (route: Route) {
this.cb && this.cb(route)
}
listen (cb: Function) {
this.cb = cb
}能夠看到，當路由變化時，挪用了Hitory中的this.cb要領，而this.cb要領是經由過程History.listen(cb)舉行設置的，回到VueRouter類定義中，找到了在init()中對其舉行了設置：
init (app: any /* Vue component instance */) {
this.apps.push(app)
history.listen(route => {
this.apps.forEach((app) => {
app._route = route
})
})
}app為Vue組件實例，然則Vue作為漸進式的前端框架，自身的組件定義中應當是沒有有關路由內置屬性_route,假如組件中要有這個屬性，應當是在插件加載的處所，即VueRouter的install()要領中混入Vue對象的，install.js的源碼：
export function install (Vue) {
Vue.mixin({
beforeCreate () {
if (isDef(this.$options.router)) {
this._router = this.$options.router
this._router.init(this)
Vue.util.defineReactive(this, '_route', this._router.history.current)
}
registerInstance(this, this)
},
})
}經由過程Vue.mixin()要領，全局註冊一個夾雜，影響註冊今後一切建立的每一個Vue實例，該夾雜在beforeCreate鈎子中經由過程Vue.util.defineReactive()定義了相應式的_route屬性。所謂相應式屬性，即當_route值轉變時，會自動挪用Vue實例的render()要領，更新視圖。
$router.push()-->HashHistory.push()-->History.transitionTo()-->History.updateRoute()-->{app._route=route}-->vm.render()HashHistory.replace()
replace()要領與push()要領差別之處在於，它並非將新路由增添到瀏覽器接見汗青棧頂，而是替代掉當前的路由：
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(location, route => {
replaceHash(route.fullPath)
onComplete && onComplete(route)
}, onAbort)
}
function replaceHash (path) {
const i = window.location.href.indexOf('#')
window.location.replace(
window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
)
}能夠看出，它與push()的完成構造基礎相似，差別點它不是直接對window.location.hash舉行賦值，而是挪用window.location.replace要領將路由舉行替代。
監聽地址欄
上面的VueRouter.push()和VueRouter.replace()是能夠在vue組件的邏輯代碼中直接挪用的，除此之外在瀏覽器中，用戶還能夠直接在瀏覽器地址欄中輸入轉變路由，因而還須要監聽瀏覽器地址欄中路由的變化 ，並具有與經由過程代碼挪用雷同的相應行動，在HashHistory中這一功用經由過程setupListeners監聽hashchange完成：
setupListeners () {
window.addEventListener('hashchange', () => {
if (!ensureSlash()) {
return
}
this.transitionTo(getHash(), route => {
replaceHash(route.fullPath)
})
})
}該要領設置監聽了瀏覽器事宜hashchange,挪用的函數為replaceHash,即在瀏覽器地址欄中直接輸入路由相當於代碼挪用了replace()要領。
HTML5History
History interface是瀏覽器汗青紀錄棧供應的接口，經由過程back(),forward(),go()等要領，我們能夠讀取瀏覽器汗青紀錄棧的信息，舉行種種跳轉操縱。
從HTML5最先，History interface供應了2個新的要領：pushState(),replaceState()使得我們能夠對瀏覽器汗青紀錄棧舉行修正：
window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)-
stateObject:當瀏覽器跳轉到新的狀況時，將觸發popState事宜，該事宜將照顧這個stateObject參數的副本 -
title:所增添紀錄的題目 -
url:所增添紀錄的url
這2個要領有個配合的特徵：當挪用他們修正瀏覽器汗青棧后，雖然當前url轉變了，但瀏覽器不會馬上發送要求該url，這就為單頁運用前端路由，更新視圖但不從新要求頁面供應了基礎。
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
pushState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
replaceState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
// src/util/push-state.js
export function pushState (url?: string, replace?: boolean) {
saveScrollPosition()
// try...catch the pushState call to get around Safari
// DOM Exception 18 where it limits to 100 pushState calls
const history = window.history
try {
if (replace) {
history.replaceState({ key: _key }, '', url)
} else {
_key = genKey()
history.pushState({ key: _key }, '', url)
}
} catch (e) {
window.location[replace ? 'replace' : 'assign'](url)
}
}
export function replaceState (url?: string) {
pushState(url, true)
}代碼構造以及更新視圖的邏輯與hash形式基礎相似，只不過將對window.location.hash()直接舉行賦值window.location.replace()改為了挪用history.pushState()和history.replaceState()要領。
在HTML5History中增添對修正瀏覽器地址欄URL的監聽popstate是直接在組織函數中實行的：
constructor (router: Router, base: ?string) {
window.addEventListener('popstate', e => {
const current = this.current
this.transitionTo(getLocation(this.base), route => {
if (expectScroll) {
handleScroll(router, route, current, true)
}
})
})
}HTML5History用到了HTML5的新特徵，須要瀏版本的支撐，經由過程supportsPushState來搜檢：
src/util/push-state.js
export const supportsPushState = inBrowser && (function () {
const ua = window.navigator.userAgent
if (
(ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
ua.indexOf('Mobile Safari') !== -1 &&
ua.indexOf('Chrome') === -1 &&
ua.indexOf('Windows Phone') === -1
) {
return false
}
return window.history && 'pushState' in window.history
})()以上就是hash形式與history形式源碼導讀，這2種形式都是經由過程瀏覽器接口完成的，除此之外，vue-router還為非瀏覽器環境預備了一個abstract形式，其道理為用一個數組stack模擬出瀏覽器汗青紀錄棧的功用。
兩種形式比較
平常的需求場景中，hash形式與history形式是差不多的，依據MDN的引見，挪用history.pushState()比擬於直接修正hash主要有以下上風：
-
pushState設置的新url能夠是與當前url同源的恣意url,而hash只可修正#背面的部份，故只可設置與當前同文檔的url -
pushState設置的新url能夠與當前url如出一轍，如許也會把紀錄增添到棧中，而hash設置的新值必需與本來不一樣才會觸發紀錄增添到棧中 -
pushState經由過程stateObject能夠增添恣意範例的數據紀錄中，而hash只可增添短字符串 -
pushState可分外設置title屬性供後續運用
history形式的題目
關於單頁運用來講，抱負的運用場景是僅在進入運用時加載index.html，後續在的收集操縱經由過程ajax完成，不會依據url從新要求頁面，然則假如用戶直接在地址欄中輸入並回車，瀏覽器重啟從新加載等特殊狀況。
hash形式僅轉變hash部份的內容，而hash部份是不會包含在http要求中的(hash帶#)：
http://oursite.com/#/user/id //如要求，只會發送http://oursite.com/所以hash形式下碰到依據url要求頁面不會有題目
而history形式則將url修正的就和一般要求後端的url一樣(history不帶#)
http://oursite.com/user/id假如這類向後端發送要求的話，後端沒有設置對應/user/id的get路由處置懲罰,會返回404毛病。
官方引薦的解決辦法是在服務端增添一個掩蓋一切狀況的候選資本：假如 URL 婚配不到任何靜態資本，則應當返回同一個 index.html 頁面，這個頁面就是你 app 依靠的頁面。同時這麼做今後，服務器就不再返回 404 毛病頁面，由於關於一切途徑都邑返回 index.html 文件。為了防止這類狀況，在 Vue 運用內里掩蓋一切的路由狀況，然後在給出一個 404 頁面。或許，假如是用 Node.js 作背景，能夠運用服務端的路由來婚配 URL，當沒有婚配到路由的時刻返回 404，從而完成 fallback。
