vue.js - 如何在Vue Router中模拟 "scroll to anchor"on page load？

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>

它跳转到 anchor 元素<div id="services">...</div>正如预期的那样。但是，当您激活链接时，然后滚动离开 #services , 并刷新页面，您不会被带回#services .您将停留在您离开的相同位置，即使 URL 中仍然包含哈希(例如，以 app.dev/#services 的形式)。

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

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 手动跳转到 anchor