Vue.js 滚动到同一路线的页面顶部

Question

我可以像这样为 Vue.js 路由器设置滚动行为：

 const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

当您单击某些非当前页面的链接时，这非常有效。当我单击已经呈现的链接时，即在页脚中，没有任何反应。 Vue Router 假设没有状态转换。在这种情况下，向上滚动的首选方式是什么？

原文由 kuceram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能通过 vue-router 执行此操作，但您可以为每个 router-link 添加滚动到顶部的方法。

只需创建一个这样的方法：

 methods: {
  scrollToTop() {
    window.scrollTo(0,0);
  }
}

将其添加到链接中：

 <router-link @click.native="$scrollToTop">

如果你也想在页脚之外使用它，最好将它添加到 Vue 原型 中

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

这不是 100% 的解决方案，但它是最简单的解决方案

原文由 Vitaly Migunov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我无法让上述任何解决方案发挥作用，这真的很令人沮丧。

最终为我工作的是以下内容：

     const router = new Router({
        mode: 'history',
        routes: [...],
        scrollBehavior() {
            document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
        }
    })

我将我的 VueJs 应用程序安装到 #app 所以我可以确定它存在并且可供选择。

原文由 Sweet Chilly Philly 发布，翻译遵循 CC BY-SA 4.0 许可协议