三种方法实现Vue路由跳转时自动定位在页面顶部

在做Vue项目的时候发现 当路由跳转时 页面是不会自动跳转到顶部的 而是停留在当前已滚动的距离

实现方法其实很简单 共有三种方法可实现页面自动跳转到顶部
在路由的main.js(router.js)里添加如下代码即可：

方法一：

// 跳转后自动返回页面顶部
router.afterEach(() => {
    window.scrollTo(0,0);
})

方法二：

const router = new VueRouter({
  routes:[...],
  scrollBehavior () {
    // return返回期望滚动到的位置的坐标
    return { x: 0, y: 0 }
  }
})

方法三：

router.beforeEach((to, from, next) => {    
    // chrome兼容
    document.body.scrollTop = 0
    // firefox兼容
    document.documentElement.scrollTop = 0
    // safari兼容
    window.pageYOffset = 0
    next()
})
 

---