2019-10-25 vue-单页面路由跳转滚动条置顶

问题描述

在vue单页面项目中，由路由跳转页面时滚动条重新置顶，但是如果有子路由的话，官方网站上的路由方法就不合适了

官方方法：

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

但是这个只适合没有子路由，而在有Layout框架里就不合适了

解决方法

在layout.vue里，添加updated钩子函数如：

updated() {
    // 子路由滚动条置顶
    let scrollTop = document.querySelector(".content");
    scrollTop.scrollTop = 0;
  }

至此，就可以完美实现路由跳转页面重新置顶