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