vue-router有两种路由模式（HTML5 History 模式 | Vue Router）。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

默认情况下，vuejs单页面应用在切换路由这后，滚动条的位置是不变的。

因为URL的变化并未引起页面的重载，同一个页面，没有特定的事件触发，浏览器没办法也没有理由更改滚动条所处的位置。

所以当在路由切换之后，如果希望回到页面的顶部，需要做类似于 window.scrollTo(0,0) 操作。

正因为vue有两种路由模式，所以也有两类回到顶部的处理方式。

1 history 模式

滚动行为 | Vue Router

vue-router 在 history 模式下，提供了一个 scrollBehavior 方法，用以控制滚动行为，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

如下为浏览器页面加载的默认操作，如果没有传入滚动条位置信息(savedPosition)，就回到页面的顶部，即返回位置信息 {x:0,y:0} ：

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

2 hash 模式

导航守卫 | Vue Router

在 hash 模式下，需要使用官方的导航守卫中的router.beforeEach：

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

演示地址：http://www.jmwjl.com