问题描述
在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;
}
至此,就可以完美实现路由跳转页面重新置顶