面试题：切换到新路由时，如何实现页面滚动到顶部或保持原先的滚动位置？

在 Vue Router 中，切换到新路由时，默认行为是保持原先的滚动位置。如果希望页面滚动到顶部或实现其他滚动行为，可以通过以下方式实现：

1. 滚动到顶部

全局配置

在 Vue Router 的配置中，可以通过 scrollBehavior 方法实现全局的滚动行为控制。以下是一个让页面滚动到顶部的示例：

const router = new VueRouter({
  routes: [
    // 路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { x: 0, y: 0 };
  },
});

参数说明

to：目标路由对象。
from：当前路由对象。
savedPosition：如果用户通过浏览器的前进/后退按钮导航，这个参数会记录之前的滚动位置。

滚动到指定元素

如果需要滚动到页面中的某个特定元素，可以返回一个选择器：

scrollBehavior(to, from, savedPosition) {
  if (to.hash) {
    return { selector: to.hash }; // 滚动到锚点
  }
  return { x: 0, y: 0 }; // 否则滚动到顶部
}

2. 保持原先的滚动位置

Vue Router 默认会保持原先的滚动位置。如果需要手动实现这一行为，可以通过 savedPosition 参数：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition; // 恢复之前的滚动位置
  }
  return { x: 0, y: 0 }; // 否则滚动到顶部
}

3. 异步滚动

如果需要等待页面加载完成后再滚动，可以返回一个 Promise：

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 }); // 滚动到顶部
    }, 500); // 延迟 500ms
  });
}

4. 动态控制滚动行为

可以根据路由的元信息（meta）动态控制滚动行为：

scrollBehavior(to, from, savedPosition) {
  if (to.meta.noScroll) {
    return false; // 不滚动
  }
  if (savedPosition) {
    return savedPosition; // 恢复之前的滚动位置
  }
  return { x: 0, y: 0 }; // 否则滚动到顶部
}

在路由配置中定义 meta：

const routes = [
  {
    path: '/no-scroll',
    component: NoScrollComponent,
    meta: { noScroll: true },
  },
];

5. 结合过渡效果

如果使用了 Vue 的过渡效果（<transition>），可以在过渡结束后再滚动：

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    this.$nextTick(() => {
      resolve({ x: 0, y: 0 }); // 在 DOM 更新后滚动
    });
  });
}