一、滚动行为
使用前端路由时,可以通过 vue-router 自定义路由切换时页面的滚动行为,实现页面在切换到新路由时滚动到顶部,或者保持原先的滚动位置,就像重新加载页面一样。
当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法
const router = createRouter({
history: createWebHistory(),
scrollBehavior: async (to, from, savedPosition) => {
console.log(to, '==============>', savedPosition);
// 模拟延迟效果
await new Promise(resolve => setTimeout(resolve, 2000));
return { top: 10000 };
}
});
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
scrollBehavior 返回滚动位置的对象信息,长这样:
{ left: number, top: number }
const router = createRouter({
history: createWebHistory(),
scrollBehavior: (to, from, savePosition) => {
return {
top:200
}
}```