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

如何模拟＆＃34;滚动到锚点＃34;在Vue路由器上加载页面？

1 个答案: