路线更改为下一个组件时,请勿自动滚动到顶部

Question

在我的Vue/Vuetify单页面应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到下一页的顶部页/组件.

结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.

Page 01 - 我正处于一个很长的名单中,只是一个例子

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

Answer 1

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

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

有关vue-router文档的更多示例,请访问:https:
//router.vuejs.org/guide/advanced/scroll-behavior.html