vue-roter有3種模式：1、hash模式，用URL hash值來做路由，支援所有瀏覽器；該模式實現的路由，在通過鏈接後面添加““#” 路由名字” 。 2、history模式，h5提供的history物件實現，依賴H5 History API和伺服器配置。 3.abstract模式，支援所有JS運行環境，如Node伺服器端，如果發現沒有瀏覽器的API，路由會自動強制進入該模式。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
Vue-router 是vue框架的路由外掛程式。
#根據vue-router官網，我們可以明確地看到vue- router的mode值有3種
hash
#history
const router = new VueRouter({
mode: 'history',
routes: [...]
})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}`)
}
}
}
} 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)
})
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
)
}window.onpopstate = function(e) {
alert(2);
}
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");mozilla.org/bar.html ，但並不會導致瀏覽器載入bar.html ，甚至不會檢查bar.html 是否存在。
也就是說，雖然瀏覽器 URL 改變了，但不會立即重新向服務端發送請求，這也是 spa應用程式 更新視圖但不 重新請求頁面的基礎。
接著我們繼續看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)
}) constructor (router: Router, base: ?string) {
super(router, base)
this.stack = []
this.index = -1
} 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
)
}hash 和history 的使用方式差不多，hash 中路由帶# ，但是使用簡單，不需要服務端配合，站在技術角度講，這個是配置最簡單的模式，本人感覺這也是hash 被設為預設模式的原因
history 模式需要服務端配合處理404的情況，但是路由中不帶# ，比hash 美觀一點。
abstract 模式支援所有JavaScript運行環境，如Node.js伺服器端，如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。
abstract 模式沒有使用瀏覽器api，可以放到node環境或桌面應用中，是 spa應用 的兜底和能力擴充。
以上是vue-roter有幾種模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
