15.5.2 scrollBehavior 方法：优雅控制页面滚动

在Vue.js应用中，特别是在单页面应用（SPA）中，页面间的导航和滚动行为的管理是提升用户体验的重要方面。Vue Router作为Vue.js的官方路由管理器，提供了强大的路由功能，其中包括对页面滚动行为的自定义能力，这主要通过scrollBehavior方法实现。本章将深入探讨scrollBehavior方法的工作原理、使用场景、以及如何通过它来实现更加精细化的页面滚动控制。

1. scrollBehavior 方法简介

scrollBehavior是Vue Router的一个路由守卫，但它与通常的导航守卫（如beforeEach、afterEach）不同，它不是在路由跳转前后执行，而是在确认路由将要跳转时，负责决定页面滚动到哪里。这意味着，无论你是通过编程式导航（如router.push或router.replace）还是声明式导航（如<router-link>）跳转页面，scrollBehavior都会介入并可能改变最终的滚动位置。

scrollBehavior方法接收两个参数：

• to：目标路由对象，包含即将进入的目标路由的信息。
• from：来源路由对象，包含离开的路由的信息。

它返回一个位置描述符对象或者一个返回位置描述符对象的Promise。位置描述符对象可以是一个像{ x: 0, y: 0 }这样的坐标对象，表示滚动到页面的具体位置；也可以是一个选择器字符串（如#anchor），表示滚动到该选择器对应的元素位置；还可以是false或undefined，表示不进行滚动。

2. 基础使用

2.1 全局配置

你可以在创建Vue Router实例时，通过scrollBehavior属性来全局配置滚动行为：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      // 如果存在保存的滚动位置，则返回它
      return savedPosition;
    } else {
      // 否则，滚动到页面顶部
      return { x: 0, y: 0 };
    }
  }
});

这里，savedPosition是Vue Router自动尝试保存和恢复的滚动位置，它通常用于页面刷新或用户直接访问URL时。

2.2 异步滚动

有时，你可能需要基于某些异步条件来决定滚动位置，这时可以返回一个Promise：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 假设我们根据路由名称决定滚动位置
      if (to.name === 'home') {
        resolve({ x: 0, y: 0 });
      } else {
        resolve({ x: 0, y: 1000 }); // 滚动到页面下方
      }
    }, 500); // 延迟500毫秒
  });
}

3. 进阶使用

3.1 滚动到锚点

如果你的页面中有锚点（例如<a name="anchor">...</a>或<div id="anchor">...</div>），并且希望在路由跳转时自动滚动到这些锚点，可以通过解析路由的query或hash来实现：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    // 如果目标路由包含hash，则滚动到该hash对应的元素
    return {
      selector: to.hash
    };
  } else if (savedPosition) {
    // 否则，如果存在保存的滚动位置，则返回它
    return savedPosition;
  } else {
    // 否则，滚动到页面顶部
    return { x: 0, y: 0 };
  }
}

注意，Vue Router 3.x 版本及以后，scrollBehavior的返回值中直接使用selector属性来指定选择器字符串。

3.2 基于路由元信息的滚动

Vue Router允许你在路由配置中定义meta字段，用于存储自定义信息。你可以利用这一特性，为不同的路由设置不同的滚动行为：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { scrollToTop: true }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: { scrollBehavior: 'anchor' } // 假设你有一个自定义的滚动到锚点的逻辑
  }
];
const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (to.meta.scrollToTop) {
      return { x: 0, y: 0 };
    }
    if (to.meta.scrollBehavior === 'anchor' && to.hash) {
      return { selector: to.hash };
    }
    // 其他逻辑...
  }
});

4. 注意事项

• 当使用HTML5 History模式时，由于URL的改变不会重新加载页面，Vue Router会自动尝试恢复滚动位置。但如果你需要在这种情况下强制滚动到特定位置，可以在scrollBehavior中返回一个新的位置描述符。
• 滚动行为可能受到浏览器行为（如回退按钮）的影响，确保你的scrollBehavior逻辑能够处理这些边缘情况。
• 在某些复杂场景下（如动态加载内容的页面），可能需要等待内容加载完成后再执行滚动操作，这时可以考虑在组件内部使用Vue的mounted钩子或Vue Router的导航守卫来辅助实现。

5. 结论

scrollBehavior是Vue Router中一个强大而灵活的特性，它允许开发者根据应用的需求，自定义页面间的滚动行为。通过合理利用这一特性，可以显著提升应用的用户体验，特别是在需要精细控制页面滚动位置的场景下。无论是全局配置还是基于路由的个性化设置，scrollBehavior都为开发者提供了丰富的选项和灵活的控制能力。希望本章内容能帮助你更好地理解和使用Vue Router的scrollBehavior方法。