如何在 Vue Router 中模拟页面加载时的“滚动到锚点”？

Question

我有一个带有以下路由器配置的小型 Vue.js SPA，取自docs：

export default new VueRouter({
    routes, // defined above...

    mode: 'history',

    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
    }
})

考虑主页上的链接：

<router-link to="#services">Services</router-link>

它按预期跳转到锚元素<div id="services">...</div>。但是，当您激活链接，然后从#services 滚动并刷新页面时，您将不会回到#services。即使 URL 中仍包含哈希（例如，app.dev/#services 的形式），您仍将停留在您离开的位置。

如果 URL 包含其散列（并且，该散列对应于有效的现有元素），我如何配置路由器以便在页面加载时将用户带到锚元素？

Answer 1

我遇到了同样的问题，但也希望有一个动画滚动到哈希。我可以使用vue-scrollto 检查这两个功能。 https://github.com/rigor789/vue-scrollto

这样的事情应该可以工作。

// import
import VueScrollTo from 'vue-scrollto';

//...

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        VueScrollTo.scrollTo(to.hash, 700);
        return { selector: to.hash }
    } else if (savedPosition) {
        return savedPosition;
    } else {
        return { x: 0, y: 0 }
    }
}

这样，它总是以哈希为动画。 如果您不想制作动画，请使用0 而不是700 作为时间。 如果您不喜欢使用该模块，您可以使用here 描述的技术通过常规 javascript 手动跳转到锚点