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

当使用客户端路由时，我们可能希望在导航到新路由时滚动到顶部，或者像真实页面重新加载一样保留历史记录条目的滚动位置。通过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 }
  }
}

了解更多信息

其他答案无法处理一些极端情况，例如：

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

如果您希望在每条路径上都发生这种情况，可以在路由器中的before 挂钩中这样做：

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

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

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

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