Vue Router 如何连续滚动到相同的哈希

问题描述 投票:0回答:4

我目前正在做一个基于Vue的网站,并使用Vue Router进行路由。我处理锚链接滚动行为的方法如下:

const router = new VueRouter({
    routes,
    scrollBehavior (to) {
        if (to.hash) {
            return { 
                selector: to.hash,
                offset: { x: 0, y: 140 }
            }
        }
        return { x: 0, y: 0 }
    }
})

我的链接是通过以下方式构建的:

<router-link class="insurance-link d-block" to="#hogar">
    <img class="insurance-logo img-fluid" src="@/assets/home-icon.svg">
    Hogar
</router-link>

如果我第一次单击该链接,它会很好地滚动到锚点位置,但如果我滚动回顶部并第二次单击它,它不会再次滚动回该位置。如果我单击另一个锚链接,然后单击前一个锚链接,则一切正常。对可能发生的事情有什么想法吗?

javascript vue.js vue-component vue-router
4个回答
2
投票

最简单的解决方法是使用

<a>
代替

<a class="insurance-link d-block" href="#hogar">
    <img class="insurance-logo img-fluid" src="@/assets/home-icon.svg">
    Hogar
</a>

如果您想使用

<router-link>
并使其在第二次单击路由器链接时工作,您需要添加自定义 onclick 处理程序,如下所示:

<router-link class="insurance-link d-block" to="#hogar" @click.native="scrollToId('hogar')">
    <img class="insurance-logo img-fluid" src="@/assets/home-icon.svg">
    Hogar
</router-link>

并添加到你的 vue 方法中:

methods: {
  scrollToId(id) {
    document.getElementById(id).scrollIntoView();
  }
}

0
投票

我相信这种行为是由于 Vue 阻止了单击事件传播,并且当您已经位于单击的哈希处时,路由器认为它是非更改,因此忽略它。 Vue 文档声明:

在HTML5历史模式下,router-link会拦截点击事件,因此 浏览器不会尝试重新加载页面。

使用

router-link
默认插槽 是进行更多控制的一种方法。这似乎提供了一个解决方法:

<router-link to="#hogar" v-slot="{ href }">
    <a :href="href">Hogar</a>
</router-link>

0
投票

受到 Owl 答案的启发,这应该可以开箱即用,宽度为 vue-router 4.4.x

const router = createRouter({/*...*/});

router.beforeEach((to, from, next) => {
    if(to.hash){
        document.querySelector(to.hash)?.scrollIntoView()
    }
    next()
})

-1
投票

鉴于我的时间有限(说实话,我也愿意)继续尝试解决方案,我选择使用 vue-anchor-router-link (https://github.com/mperator/vue-anchor-router-link ),这就像一个魅力。非常感谢大家,你们的回答帮助我更好地理解了 Vue 和 Vue Router 处理锚链接的方式。

© www.soinside.com 2019 - 2024. All rights reserved.