fix(client): handle empty hash in links (#2738)

pull/2741/head
Divyansh Singh 1 year ago committed by GitHub
parent e54eea3da0
commit c6c983ed73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -74,11 +74,7 @@ export function createRouter(
href = url.pathname + url.search + url.hash href = url.pathname + url.search + url.hash
} }
} }
if (inBrowser && href !== location.href) { updateHistory(href)
// save scroll position before changing url
history.replaceState({ scrollPosition: window.scrollY }, document.title)
history.pushState(null, '', href)
}
await loadPage(href) await loadPage(href)
await router.onAfterRouteChanged?.(href) await router.onAfterRouteChanged?.(href)
} }
@ -211,15 +207,18 @@ export function createRouter(
search === currentUrl.search search === currentUrl.search
) { ) {
// scroll between hash anchors in the same page // scroll between hash anchors in the same page
if (hash) {
// avoid duplicate history entries when the hash is same // avoid duplicate history entries when the hash is same
if (hash !== currentUrl.hash) { if (hash !== currentUrl.hash) {
history.pushState(null, '', hash) history.pushState(null, '', hash)
// still emit the event so we can listen to it in themes // still emit the event so we can listen to it in themes
window.dispatchEvent(new Event('hashchange')) window.dispatchEvent(new Event('hashchange'))
} }
if (hash) {
// use smooth scroll when clicking on header anchor links // use smooth scroll when clicking on header anchor links
scrollTo(link, hash, link.classList.contains('header-anchor')) scrollTo(link, hash, link.classList.contains('header-anchor'))
} else {
updateHistory(href)
window.scrollTo(0, 0)
} }
} else { } else {
go(href) go(href)
@ -292,20 +291,11 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
target.getBoundingClientRect().top - target.getBoundingClientRect().top -
offset + offset +
targetPadding targetPadding
// only smooth scroll if distance is smaller than screen height.
function scrollToTarget() { function scrollToTarget() {
if ( // only smooth scroll if distance is smaller than screen height.
!smooth || if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight)
Math.abs(targetTop - window.scrollY) > window.innerHeight
) {
window.scrollTo(0, targetTop) window.scrollTo(0, targetTop)
} else { else window.scrollTo({ left: 0, top: targetTop, behavior: 'smooth' })
window.scrollTo({
left: 0,
top: targetTop,
behavior: 'smooth'
})
}
} }
requestAnimationFrame(scrollToTarget) requestAnimationFrame(scrollToTarget)
} }
@ -338,3 +328,11 @@ function shouldHotReload(payload: PageDataPayload): boolean {
.slice(siteDataRef.value.base.length - 1) .slice(siteDataRef.value.base.length - 1)
return payloadPath === locationPath return payloadPath === locationPath
} }
function updateHistory(href: string) {
if (inBrowser && href !== location.href) {
// save scroll position before changing url
history.replaceState({ scrollPosition: window.scrollY }, document.title)
history.pushState(null, '', href)
}
}

Loading…
Cancel
Save