hash模式下Vue-router頁面返回錨點實現

在普通頁面中，點擊瀏覽器的返回按鈕，在返回到上一頁時會處在上次瀏覽的位置。單頁面應用中，由於始終是同一個頁面， 因此需要自行實現頁面返回時的錨點。Vue-router的Scroll Behavior可以用於解決這個問題，但是只能應用在HTML5 history模式。本文實現了在hash模式下的錨點跳轉。

錨點位置存儲

Vue-router要求在HTML5 history模式下，是為了使用pushState、replaceState API以及popstate事件:

參考源碼html5.js

// Vue-router中的push方法 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) }// pushState方法 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 setupScroll () { window.addEventListener( popstate , e => { saveScrollPosition(); if (e.state && e.state.key) { setStateKey(e.state.key); } }) } window.addEventListener( popstate , e => { this.transitionTo(getLocation(this.base), route => { if (expectScroll) { handleScroll(router, route, this.current, true) } }) })

在hash模式下需要我們自己記錄錨點位置。可以維護一個與history相同的數組，每次頁面跳轉時在Vue-router提供的鉤子函數中遍曆數組，存儲錨點位置。

錨點滾動

// wait until re-render finishes before scrolling router.app.$nextTick(() => { let position = getScrollPosition(); const shouldScroll = behavior(to, from, isPop ? position : null); if (!shouldScroll) { return; } const isObject = typeof shouldScroll === object ; if (isObject && typeof shouldScroll.selector === string ) { const el = document.querySelector(shouldScroll.selector); if (el) { position = getElementPosition(el); } else if (isValidPosition(shouldScroll)) { position = normalizePosition(shouldScroll); } } else if (isObject && isValidPosition(shouldScroll)) { position = normalizePosition(shouldScroll); } if (position) { window.scrollTo(position.x, position.y); } })

我們目前已經自行記錄了錨點，因此可以在router中模仿一個跳轉過程：

router.beforeEach((to, from, next) => { next(); // 重要的是設置跳轉的時機。過早的話頁面還沒載入完成，高度不夠導致不能滾動。過晚的話會造成頁面的閃爍。 router.app.$nextTick(() => { // 獲取history數組中的最後一個browserHistoryLast if (to.fullPath === browserHistoryLast.path && browserHistoryLast.pos) { document.body.scrollTop = browserHistoryLast.pos; } else { document.body.scrollTop = 0; } }); });

在router的鉤子函數中，調用next之後，在$nextTick中進行頁面的滾動，即可達到和scrollBehavior相似的效果。

需要注意的是，各個頁面的數據應當存儲在vuex中，不能每次進入頁面都發送請求（即使不錨點也應當這麼做）。否側因為返回時頁面還在請求數據，不能達到錨點的效果。

關於過場動畫

如果頁面跳轉有過場動畫存在，非常容易在錨點滾動時發生閃爍。嘗試了幾種方式，都沒能達到很好效果。

嘗試過的方法的思路在這裡記錄一下，這些方法都會有很大的抖動閃爍，根本原因還是頁面跳轉的時機不對：

返回到有存儲pos的舊頁面時，在 中將頁面滾動到記錄的位置。打開新頁面時，在 中將頁面滾動設置為0，確保新頁面在頂部。

vue-router的過渡動畫使用的是absolute定位+transform。因此嘗試了給頁面設置top值來消除閃爍。在跳轉前給當前頁面設置與目標頁面滾動位置相同的top值，在滾動結束後由於不再是absolute定位，top值不再生效，沒有閃爍發生。在返回時，列表頁會首先絕對定位到首頁要滾動的位置（此時會有閃爍），之後直接跳轉到首頁。閃爍集中在返回過渡效果之前。

其他問題

全局mixin中不能寫組件中的過渡鉤子，如 等，會報錯。

這個issue中說已經修復了mixins usage are fixed in fb32ccb, 但是還是用不了。

computed只有在vuex中的變數變化時，才會進行更新。import進來的值不行。

在onTransitionBeforeStart修改變數，不會使from頁面中的computed更新。如果想要在頁面跳轉時更新from頁面的computed，需要在router的鉤子函數中進行修改，在this.$nextTick中調用next()。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！