Vue Router 如何连续滚动到相同的哈希 [英] Vue Router how to scroll to same hash consecutively
问题描述
我目前正在开发一个基于 Vue 的站点,并使用 Vue Router 进行路由.我处理滚动行为以锚定链接的方法如下:
I'm currently working on a site based on Vue and using Vue Router for routing. My way to handle scroll behavior to anchor links is the following:
const router = new VueRouter({
routes,
scrollBehavior (to) {
if (to.hash) {
return {
selector: to.hash,
offset: { x: 0, y: 140 }
}
}
return { x: 0, y: 0 }
}
})
我的链接是通过以下方式构建的:
And my links are built in the following way:
<router-link class="insurance-link d-block" to="#hogar">
<img class="insurance-logo img-fluid" src="@/assets/home-icon.svg">
Hogar
</router-link>
如果我第一次点击链接,它会很好地滚动到锚点位置,但是如果我滚动回顶部并第二次点击它,它就不会再次滚动回那个位置.如果我点击另一个锚链接,然后点击前一个,一切正常.对可能发生的事情有什么想法吗?
If I click on the link for the first time it scrolls to the anchor position fine, but if I scroll back to the top and click on it for the second time it won't scroll back to that position again. If I click on another anchor link and then click on the previous one everything works fine. Any ideas on what might be happening?
推荐答案
鉴于我的时间有限(老实说我会)继续尝试解决方案,我选择使用 vue-anchor-router-link (
Given I had limited time (and will, to be honest) to keep on trying solutions I opted to go with vue-anchor-router-link (https://github.com/mperator/vue-anchor-router-link), which worked like a charm. Thank you so much to everyone, your answers helped me understand better the way Vue and Vue Router handle anchor links.
这篇关于Vue Router 如何连续滚动到相同的哈希的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!