Router滚动行为

一、滚动行为

使用前端路由时，可以通过 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
    }
  }```