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

Question

当滚动到新路径的顶部是即时的时,我有一个页面转换不能很好地工作.我想在它自动滚动到顶部之前等待100ms.以下代码根本不会滚动.有没有办法做到这一点？

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

Answer 1

现在Vue本身支持这个,只需使用scrollBehaviour,如下所示:

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

更多这里.

Answer 2

其他答案无法处理边缘情况,例如:

1. 保存位置 - 当用户单击后退或前进位置时,将保存位置.我们希望维护用户正在查看的位置.
2. 哈希链接 -例如,http://example.com/foo#bar要导航到一个页面上的元素id的bar.
3. 最后,在所有其他情况下,我们可以导航到页面顶部.

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

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return { x: 0, y: 0 };
    }
  }
});

Answer 3

如果您希望在每个路由上发生这种情况,您可以在路由器的前挂钩中执行此操作:

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();
});

Answer 4

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

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

在路由的核心组件（在本例中为Home）mounted()函数中实现了我想要的。