应用场景:
从A组件进入B组件,再返回A组件后,想让A组件的页面回到进入B组件前的位置,或者自动刷新回到A组件顶部,就需配置路由的滚动行为(scrollBehavior )。
①返回A组件时,让A组件回到进入B组件前的位置,路由配置:
const router = createRouter({
history:createWebHistory(), //路由模式
routes, //路由配置项
//滚动行为
scrollBehavior (to, from, savedPosition) {
//console.log(savedPosition);
if (savedPosition) {
return savedPosition
} else {
return{
top:0,
left:0
}
}
}
})
②返回A组件时,让A组件自动刷新回到顶部:
scrollBehavior (to, from, savedPosition) {
return{
top:0,
left:0
}
}