vue 路由跳转时定位到页面某个位置的方法汇总

页面底部

 window.onload = function () {
      window.scrollTo(0, document.body.scrollHeight)
    }
或直接在初始化中：
  window.scrollTo(0, document.body.scrollHeight)

页面顶部

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

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

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

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

方法3：
在main.js中添加以下代码即可：

router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})
 
 
或者下面代码：
 
// 跳转后返回顶部
 router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
 })