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

Question

我有一个小的Vue.js SPA,其中包含以下路由器配置,取自文档:

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。如果您不喜欢使用该模块，您可以使用此处描述的技术通过常规 javascript 手动跳转到锚点