三种方法实现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()
})

使用示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {...}
]

const router = new VueRouter({
  routes
})

export default router

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

此外 还可在页面单独使用：

在mounted生命周期添加相应的方法即可

<script>
export default {
mounted()
{
    // 跳转后返回页面顶部
    window.scrollTo(0,0);
}
</script>