代码之家  ›  专栏  ›  技术社区  ›  extraxt

当路线切换到下一个组件时,不要自动滚动到顶部

  •  7
  • extraxt  · 技术社区  · 7 年前

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

    第01页-我在一个长长的列表中,只是一个例子

    enter image description here

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

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  11
  •   Kael Watts-Deuchar    6 年前

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

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

    请参阅vue路由器文档中的更多示例:
    https://router.vuejs.org/guide/advanced/scroll-behavior.html