Question

我可以将滚动行为设置为Vue.js Router，如下所示：

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假设没有状态转换。在这种情况下向上滚动的首选方法是什么？

Answer 1

你不能通过vue-router做到这一点。但是您可以向每个路由器链接添加滚动到顶部方法。

只需创建一个方法

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

并将其添加到链接

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

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

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

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

Answer 2

为此找到的最佳解决方案是：https://router.vuejs.org/guide/advanced/scroll-behavior.html

特别是：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

Answer 3

我想回答这个问题，以向那些根本无法使用滚动行为的人添加更多的内容。

我无法使以上任何解决方案正常工作，这实在令人沮丧。

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

broken dag

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

Answer 4

扩展Vitaly Migunov的答案，您可以直接从路由器向窗口对象添加scrollTo方法。这样，您无需将功能添加到每个路由器链接。

const router = new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior() {
    window.scrollTo(0,0);
  }
})

Answer 5

如果需要，您都可以使用behavior: smooth。

moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

  window.scroll({
    top: to,
    left: 0,
    behavior: 'smooth'
  })

  this.moveToDown = !this.moveToDown
}

Answer 6

使用refs滚动到特定部分

<template>
  <body>
    <div ref="section">
      // Your content section
    </div>
  </body>
</template>

export default class MyPage extends Vue {
  $refs!: {
    section: HTMLFormElement;
  };

  scrollToTop() {
    this.$refs.section.scrollTo(0, 0);
  }
}

Answer 7

基本上，除非您指定内部页面位置（例如，www.example.com / home＃blah），否则我认为您想滚动到页面顶部。到目前为止，所有答案都将忽略此location参数，无论如何都只是滚动到顶部。

scrollBehavior(to, from, savedPosition) {
    //If there is no hash parameter when we change vue, scroll to top of page
    if (!to.hash) {
      return { x: 0, y: 0 }
    }
  }

我们可以使用to.hash检查是否有位置参数，然后仅在不存在哈希位置的情况下滚动到顶部。

Answer 8

如果浏览器支持 history.pushState ，则Vue Js具有内置的滚动支持。

配置非常容易，在创建如下所示的Vue路由器实例时，只需提供scrollBehavior函数即可：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // page scroll to top for all route navigations
    return { x: 0, y: 0 }
  }
})

有关Vue的更多选项和详细信息 滚动行为 click here

Answer 9

使用这个不错的组件：https://www.npmjs.com/package/vue-backtotop

<back-to-top text="Back to top"></back-to-top>

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

9 个答案: