vue页面跳转的时候，显示在顶部

应用的场景

在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。

第一种方法

在main.js中添加

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

第二种方法

如果需要某个页面跳转回顶部，仅需要在当前页面（page）合适的位置加入一下代码：

// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0

第三种方法

在路由的index.js中，加入以下代码也可实现路由改变定位到顶部的效果，savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用，代码如下：

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