溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
當前版本: 3.0.3
類目錄: src/history/base.js
hash模式
即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。比如這個 URL： http://www.abc.com/#/hello ，hash 的值為 #/hello。它的特點在于：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
history模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。
HTML5History實現
使用window.addEventListener('popstate')監聽瀏覽器滾動行為，然后判斷配置是否有scrollBehavior， 有就調用handleScroll方法來處理
滾動行為: 使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
handleScroll
<!-- 等待頁面渲染完才進行滾動的操作 -->
router.app.$nextTick(() => {
<!-- 初始化數據 -->
const position = getScrollPosition()
const shouldScroll = behavior.call(router, to, from, isPop ? position : null)
if (!shouldScroll) {
return
}
<!-- 判斷是否是Promise,官網說支持異步 -->
if (typeof shouldScroll.then === 'function') {
shouldScroll.then(shouldScroll => {
scrollToPosition((shouldScroll: any), position)
}).catch(err => {
if (process.env.NODE_ENV !== 'production') {
assert(false, err.toString())
}
})
} else {
scrollToPosition(shouldScroll, position)
}
})
scrollToPosition
function scrollToPosition (shouldScroll, position) {
const isObject = typeof shouldScroll === 'object'
<!-- 對position進行初始化的操作 -->
if (isObject && typeof shouldScroll.selector === 'string') {
const el = document.querySelector(shouldScroll.selector)
if (el) {
let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {}
offset = normalizeOffset(offset)
position = getElementPosition(el, offset)
} else if (isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
} else if (isObject && isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
使用window.scrollTo來進行滾動處理
if (position) {
window.scrollTo(position.x, position.y)
}
}
push
push操作也是 HTML5History模式下的一個比較關鍵的方法，他使用pushState來進行跳轉操作，然后handleScroll來進行滾動\
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)
}
}
HashHistory實現
對于HashHistory的實現，和HTML5History的區別是在于Listener的方式和跳轉的方式
Listener的方式這里是使用了hashchange，但是如果需要滾動行為就會去監聽popstate
window.addEventListener(supportsPushState ? 'popstate' : 'hashchange')
跳轉的方式會判斷是否需要滾動，不需要就直接使用window.location.hash
function pushHash (path) {
if (supportsPushState) {
pushState(getUrl(path))
} else {
window.location.hash = path
}
}
總結
以上所述是小編給大家介紹的vue-router之hash模式和history模式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
