Vue路由跳转定位到顶部

1.vue-router的scrollBehavior

在vue的router目录下的index.js文件中进行配置：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
           return savedPosition
      } else {
       // vue2.0  x  y  控制
       // vue3.0  left  top 控制
      return { x: 0, y: 0 }
   }
 }
  }
})

2.路由守卫

可以写到到route下面的index.js文件中，也可以放到main.js中 做一个全局钩子

前置钩子:
router.beforeEach((to, from, next) => {
  // 路由跳转后，让页面回到顶部
  // chrome
  document.body.scrollTop = 0; // firefox
  document.documentElement.scrollTop = 0; // safari
  window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩子就不会被销毁
  next();
  //to 即将进入的路由
  //from 即将离开的路由
  //next 放行
});
 
 
或者后置守卫：
 
// 跳转后返回顶部
 router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
 })

3.watch监听里面去监听路由跳转顶部

可以写到app.vue中

watch: {
    $route (to) {
      document.getElementsByClassName('app')[0].scrollTop = 0 // 设置滚动条位置;
    }
  }