vue路由跳转 定位到页面顶部

Vue-router 路由跳转之后，页面默认停留在当前浏览的位置，

想要的是路由跳转之后，页面重新定位到顶部，

1.下面介绍一下可以实现的方法：

在理由配置文件中，添加以下代码即可

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter);

let router = new VueRouter({
    routes
});

//要添加的代码
router.beforeEach((to, from, next) => {
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

export default router;

或 在main.js中添加如下代码：

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

2. 或

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