我们在使用vue-router做路由跳转时,**想要页面滚到顶部,或者是保持原先的滚动位置,**就像重新加载页面那样,使用scrollBehavior。
//注册路由
export default new Router({
mode:'history', // 默认为'hash'模式history
routes: constantRouterMap,
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
})
const scrollBehavior = function (to, from, savedPosition) {
// savedPosition 会在你使用浏览器前进或后退按钮时候生效
// 这个跟你使用 router.go() 或 router.back() 效果一致
// 这也是为什么我在 tab 栏结构中放入了一个 点击回退 的按钮
if (savedPosition) {
return savedPosition
} else {
// 如果不是通过上述行为切换组件,就会让页面回到顶部
return {x: 0, y: 0}
}
}
from从哪个页面来,to去往哪个页面,两者都是一个对象,saveposition上次该页面滚动的位置,注意,该功能只用在浏览器的前进后退 (通过浏览器的 前进/后退 按钮触发) 时才可用。