因为vue-router的跳转默认是保持原先的滚动位置,并不会自动回滚到顶部,所以需要在createRouter的时候配置一下。不废话~
const router = createRouter({
// history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}
})
其实到这问题已经简单的被解决了,但是呢,如果想完美一些,就要用到传的参数to、from、savedPosition,to和from不用说,一个是到哪里去,一个是从哪里来,至于这个savedPosition嘛,其实字面意思就是保存的坐标,所以理解下来就是在某个页面离开时所滚动的坐标位置,所以代码再完善一下~
const router = createRouter({
// history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (from.fullPath === '/xxx') {
return { top: 0 }
} else {
return savedPosition || { top: 0 }
}
}
})
我项目中因为是一跳多,所以是根据from判断的,里面的判断可以根据读者自己项目的具体场景来做判断。
其实,其实,vue-router官方文档是有写的,详情可以查看VueRouter。
有不对的欢迎大家指正。