• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 滚动行为

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

    注意:这个功能只在支持history.pushState的浏览器中可用。IE10+,主流浏览器都支持。


    当创建一个 Router 实例,你可以提供一个scrollBehavior方法:

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

    scrollBehavior方法接收tofrom路由对象。第三个参数savedPosition,当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时,才可用。


    返回 ScrollToOptions 位置对象

    该函数可以返回一个ScrollToOptions位置对象:

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

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

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

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


    返回 savedPosition 位置对象

    返回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,
          }
        }
      },
    })
    

    如果你的浏览器支持滚动行为,你可以让它变得更流畅:

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


    延迟滚动

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

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

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

    上篇:数据获取

    下篇:路由懒加载