Vue.js在setTimeout之后滚动到新页面路径的顶部

时间:2017-03-01 17:40:55

标签: vue.js vue-router

当滚动到新路线的顶部时,我的页面转换效果不佳。我想在它自动滚动到顶部之前等待100ms。以下代码根本不会滚动。有没有办法做到这一点?

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})

6 个答案:

答案 0 :(得分:32)

现在 Vue 原生支持,使用scrollBehaviour,如下所示:

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

More here

答案 1 :(得分:11)

其他答案无法处理诸如以下的极端情况:

  1. Saved Position-当用户单击后退或前进位置时,将保存位置。我们要保持用户正在查看的位置。
  2. Hash Links-例如http://example.com/foo#bar应该导航到页面上元素为id的{​​{1}}。
  3. 最后,在所有其他情况下,我们都可以导航到页面顶部。

以下是处理以上所有内容的示例代码:

bar

答案 2 :(得分:9)

如果您希望在每条路线上都能实现这一点,您可以在路由器的hook之前执行此操作:

const router = new VueRouter({ ... })

router.beforeEach(function (to, from, next) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    next();
});

如果您使用的是较旧版本的vue-router,请使用:

router.beforeEach(function (transition) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    transition.next();
});

答案 3 :(得分:1)

在使用客户端路由时,我们可能希望在导航到新路由时滚动到顶部,或者保留历史条目的滚动位置,就像真实页面重新加载一样。通过vue-router,您可以实现这些目标,甚至更好,还可以完全自定义路线导航中的滚动行为。

注意:此功能仅在浏览器支持的情况下有效 history.pushState

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

已保存位置:

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

For more information

答案 4 :(得分:0)

如果要等待很长时间,请使用export default new Router({ scrollBehavior() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: 0 }) }, 100) }) }, routes: [ { path: '/', name: 'Home', component: Home } ], mode: 'history' }); 的异步滚动,如下所示:

url

More here

答案 5 :(得分:-1)

这可能不是最好的方法,但添加

document.body.scrollTop = document.documentElement.scrollTop = 0;

在路线的核心组件中(在这种情况下,Homemounted()功能达到我想要的效果。