在 Vue 项目里，Vue Router 的滚动行为能对路由切换时的滚动位置进行控制，下面为你介绍它的常见使用场景和配置方法：

基本配置

在创建 Vue Router 实例时，可以通过scrollBehavior函数来配置滚动行为：

// router/index.js
const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 返回滚动位置的对象信息
    // { x: number, y: number }
    // { selector: string, offset? : { x: number, y: number } }
  }
})

常见使用场景

1. 恢复到之前的滚动位置

用户进行后退 / 前进操作时，页面会恢复到之前的滚动位置，这和浏览器的默认行为是一样的：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 };
  }
}

2. 每次都滚动到页面顶部

不管是首次加载页面，还是进行路由切换，页面都会滚动到顶部：

scrollBehavior() {
  return { x: 0, y: 0 };
}

3. 滚动到锚点位置

路由切换到带锚点的 URL 时，页面会滚动到对应的元素位置：

scrollBehavior(to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth', // 平滑滚动
    };
  }
}

4. 延迟滚动（适用于动态加载内容的情况）

有些页面内容是动态加载的，这时可以等内容加载完成后再执行滚动操作：

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    // 等待DOM更新
    nextTick(() => {
      resolve({ x: 0, y: 0 });
    });
  });
}

5. 基于路由元信息的滚动控制

你可以在路由配置中添加meta字段，从而实现更灵活的滚动控制：

// 路由配置
const routes = [
  {
    path: '/home',
    component: Home,
    meta: { scrollToTop: true }
  }
];

// 滚动行为配置
scrollBehavior(to, from, savedPosition) {
  if (to.meta.scrollToTop) {
    return { x: 0, y: 0 };
  }
}

实际应用建议

• 平滑滚动：可以通过 CSS 或者设置behavior: 'smooth'来实现平滑滚动效果：

组件内控制：除了全局配置，你还可以在组件内部通过监听路由变化来控制滚动位置：

watch: {
  $route(to, from) {
    // 滚动到页面顶部
    window.scrollTo(0, 0);
  }
}

• 异步滚动：处理异步加载内容时，要确保在内容渲染完成之后再执行滚动操作。