本篇內(nèi)容主要講解“vue-roter有哪些模式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue-roter有哪些模式”吧!
創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站開發(fā)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、微信小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體。
vue-roter有3種模式：1、hash模式，用URL hash值來做路由，支持所有瀏覽器；該模式實(shí)現(xiàn)的路由，在通過鏈接后面添加““#”+路由名字”。2、history模式，由h6提供的history對象實(shí)現(xiàn)，依賴H5 History API和服務(wù)器配置。3、abstract模式，支持所有JS運(yùn)行環(huán)境，如Node服務(wù)器端，如果發(fā)現(xiàn)沒有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入該模式。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
Vue-router 是vue框架的路由插件。
根據(jù)vue-router官網(wǎng)，我們可以明確看到vue-router的mode值有3種
hash
history
abstract
其中，hash 和 history 是 SPA 單頁應(yīng)用程序的基礎(chǔ)。
先說結(jié)論： spa應(yīng)用路由有2種模式，hash 和 history，vue路由有3種模式，比 spa 多了一個(gè) abstract。
在vue-router中通過mode這個(gè)參數(shù)修改路由的模式：
重慶分公司
重慶分公司
const router = new VueRouter({
mode: 'history',
routes: [...]
})具體怎么實(shí)現(xiàn)的呢，首先我們下載 vue-router 的源碼
抽離出來對mode的處理
class vueRouter {
constructor(options) {
let mode = options.mode || 'hash'
this.fallback =
mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode
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}`)
}
}
}
}可以看到默認(rèn)使用的是 hash 模式，當(dāng)設(shè)置為 history 時(shí)，如果不支持 history 方法，也會(huì)強(qiáng)制使用 hash 模式。 當(dāng)不在瀏覽器環(huán)境，比如 node 中時(shí)，直接強(qiáng)制使用 abstract 模式。
閱讀這部分源碼前，我們先來了解下 hash 的基礎(chǔ)： 根據(jù)MDN上的介紹，Location 接口的 hash 屬性返回一個(gè) USVString，其中會(huì)包含URL標(biāo)識(shí)中的 '#' 和 后面URL片段標(biāo)識(shí)符，'#' 和后面URL片段標(biāo)識(shí)符被稱為 hash。 它有這樣一些特點(diǎn)：
在第一個(gè)#后面出現(xiàn)的任何字符，都會(huì)被瀏覽器解讀為位置標(biāo)識(shí)符。這意味著，這些字符都不會(huì)被發(fā)送到服務(wù)器端。
單單改變#后的部分，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置，不會(huì)重新加載網(wǎng)頁。
每一次改變#后的部分，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄，使用"后退"按鈕，就可以回到上一個(gè)位置。
可通過window.location.hash屬性讀取 hash 值，并且 window.location.hash 這個(gè)屬性可讀可寫。
使用 window.addEventListener("hashchange", fun) 可以監(jiān)聽 hash 的變化
了解了這些基本知識(shí)后，我們繼續(xù)來看 vue-router 源碼對 /src/history/hash.js 的處理
const handleRoutingEvent = () => {
const current = this.current
if (!ensureSlash()) {
return
}
this.transitionTo(getHash(), route => {
if (supportsScroll) {
handleScroll(this.router, route, current, true)
}
if (!supportsPushState) {
replaceHash(route.fullPath)
}
})
}
const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
eventType,
handleRoutingEvent
)
this.listeners.push(() => {
window.removeEventListener(eventType, handleRoutingEvent)
})首先也是使用 window.addEventListener("hashchange", fun) 監(jiān)聽路由的變化,然后使用 transitionTo 方法更新視圖
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(
location,
route => {
pushHash(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 => {
replaceHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
},
onAbort
)
}vue-router 的2個(gè)主要API push 和 replace 也是簡單處理了下 hash , 然后調(diào)用 transitionTo 方法更新視圖
老規(guī)矩，先來了解下 HTML5History 的的基本知識(shí)： 根據(jù)MDN上的介紹，History 接口允許操作瀏覽器的曾經(jīng)在標(biāo)簽頁或者框架里訪問的會(huì)話歷史記錄。 使用 back(), forward()和 go() 方法來完成在用戶歷史記錄中向后和向前的跳轉(zhuǎn)。 HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。 稍微了解下 history.pushState()：
window.onpopstate = function(e) {
alert(2);
}
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");這將使瀏覽器地址欄顯示為 mozilla.org/bar.html ，但并不會(huì)導(dǎo)致瀏覽器加載 bar.html ，甚至不會(huì)檢查bar.html 是否存在。
也就是說，雖然瀏覽器 URL 改變了，但不會(huì)立即重新向服務(wù)端發(fā)送請求，這也是 spa應(yīng)用 更新視圖但不 重新請求頁面的基礎(chǔ)。
接著我們繼續(xù)看 vue-router 源碼對 /src/history/html5.js 的處理：
const handleRoutingEvent = () => {
const current = this.current
// Avoiding first `popstate` event dispatched in some browsers but first
// history route not updated since async guard at the same time.
const location = getLocation(this.base)
if (this.current === START && location === this._startLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
}
window.addEventListener('popstate', handleRoutingEvent)
this.listeners.push(() => {
window.removeEventListener('popstate', handleRoutingEvent)
})處理邏輯和 hash 相似，使用 window.addEventListener("popstate", fun) 監(jiān)聽路由的變化,然后使用 transitionTo 方法更新視圖。 push 和 replace 等方法就不再詳細(xì)介紹。
最后我們直接來看一下對 /src/history/abstract.js 的處理：
constructor (router: Router, base: ?string) {
super(router, base)
this.stack = []
this.index = -1
}首先定義了2個(gè)變量，stack 來記錄調(diào)用的記錄， index 記錄當(dāng)前的指針位置
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(
location,
route => {
this.stack = this.stack.slice(0, this.index + 1).concat(route)
this.index++
onComplete && onComplete(route)
},
onAbort
)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(
location,
route => {
this.stack = this.stack.slice(0, this.index).concat(route)
onComplete && onComplete(route)
},
onAbort
)
}push 和 replac方法 也是通過 stack 和 index 2個(gè)變量，模擬出瀏覽器的歷史調(diào)用記錄。
到此，相信大家對“vue-roter有哪些模式”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
