【Vue Router】015-滚动行为*

痛定思痛。 2023-10-01 11:35 1阅读 0赞

## 1.15 滚动行为\* ##

> 直接贴文档吧，使用时再进行详细探索，很难所有功能都亲自实现一遍！

### 1.15.1 概述 ###

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

**注意: 这个功能只在支持 history.pushState 的浏览器中可用。**

### 1.15.2 基本使用 ###

> 当创建一个 Router 实例，你可以提供一个 `scrollBehavior` 方法：

const router = createRouter({
        
      history: createWebHashHistory(),
      routes: [...],
      scrollBehavior (to, from, savedPosition) {
        
        // return 期望滚动到哪个的位置
      }
    })

> `scrollBehavior` 函数接收 `to`和`from` 路由对象，如 [Navigation Guards][]。第三个参数 `savedPosition`，只有当这是一个 `popstate` 导航时才可用（由浏览器的后退/前进按钮触发）。该函数可以返回一个 [`ScrollToOptions`][ScrollToOptions]

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        // 始终滚动到顶部
        return {
         top: 0 }
      },
    })

> 你也可以通过 `el` 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，`top` 和 `left` 将被视为该元素的相对偏移量。

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        // 始终在元素 #main 上方滚动 10px
        return {
        
          // 也可以这么写
          // el: document.getElementById('main'),
          el: '#main',
          top: -10,
        }
      },
    })

> 如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。

> 返回 `savedPosition`，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        if (savedPosition) {
        
          return savedPosition
        } else {
        
          return {
         top: 0 }
        }
      },
    })

> 如果你要模拟 “滚动到锚点” 的行为：

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        if (to.hash) {
        
          return {
        
            el: to.hash,
          }
        }
      },
    })

> 如果你的浏览器支持[滚动行为][Link 1]，你可以让它变得更流畅：

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        if (to.hash) {
        
          return {
        
            el: to.hash
            behavior: 'smooth',
          }
        }
      }
    })

### 1.15.3 延迟滚动 ###

> 有时候，我们需要在页面中滚动之前稍作等待。例如，当处理过渡时，我们希望等待过渡结束后再滚动。要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。下面是一个例子，我们在滚动前等待 500ms：

const router = createRouter({
        
      scrollBehavior(to, from, savedPosition) {
        
        return new Promise((resolve, reject) => {
        
          setTimeout(() => {
        
            resolve({
         left: 0, top: 0 })
          }, 500)
        })
      },
    })

> 我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。

[Navigation Guards]: https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
[ScrollToOptions]: https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior