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

我有一个小型 Vue.js SPA，具有以下路由器配置，取自docs https://router.vuejs.org/en/advanced/scroll-behavior.html:

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，然后刷新页面，您将not被带回#services。即使 URL 中仍然包含哈希值（例如，以以下形式），您仍将停留在上次停止的位置app.dev/#services).

如何配置路由器，以便在页面加载时将用户带到锚点元素，前提是 URL 包含其哈希值（并且该哈希值对应于有效的现有元素）？

我有同样的问题，但也想有一个动画滚动到哈希。我能够检查这两个功能vue-scrollto. https://github.com/rigor789/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。 如果您不喜欢使用该模块，您可以使用所描述的技术通过常规 javascript 手动跳转到锚点here https://stackoverflow.com/questions/13735912/anchor-jumping-by-using-javascript