Vue--路由跳转时的小细节（新页面可视归顶）

路由跳转，使得新页面可视归顶

话不多唠，看图~~

该图是首页面，此时它的头部距可视区域为零
调动一下距离：

随机跳转一条路由：

这里跳转路由后，此时这个新的页面没有使得可视区域，与页面的头部对齐。
问题虽小，为了用户的体验，我们需要对它进行调整，使跳转路由到达一个新路由时，达到归顶效果：

我们可以在 Router—index.js的路由配置中添加

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

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

对于所有路由导航，简单地让页面滚动到顶部。返回 savedPosition，在按下 后退/前进 按钮时，在滚动条位置，就会像浏览器的原生表现那样。

小作者在持续更新…