当路由切换到下一个组件时，不会自动滚动到顶部

Question

在我的 Vue/Vuetify 单页应用程序中，当我向下滚动页面并单击页面底部的 link 时，它确实改变了路线并将我带到下一页但是它不会滚动到下一个 page/Component.

的顶部

因此，如果第一页很长，第二页内容很少，给人的印象是第二页没有内容。因为内容只有在用户滚动到页面顶部时才可见。

第 01 页 - 我在一长串的中间，只是一个例子

第 02 页 - 下一个组件在中间加载

Answer 1

您可以使用 vue-router 的 scrollBehavior 方法来更改页面导航的滚动位置。而不是 created () { window.scrollTo(0, 0) } 你应该使用：

new VueRouter ({
  routes: [...],
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
})

When route change to next Component, don't scroll to the top automatically