滚动行为

当通过路由跳转切换到一个新的页面时，想要滚动到页面的顶部，或者保持原先的滚动位置，就像重新加载页面一样。vue-router可以自定义路由切换页面时如何滚动。

在创建一个router实例对象时，你可以提供一个scrollBehavior方法：

const router = createRouter({
    history: createWebHistory(),
    scrollBehavior: (to, from, savePosition) => {
        console.log('to ====>', to)
    }
})

scrollBehavior方法接收to、from路由对象，第三个参数savePosition当且仅当popstate导航（通过浏览器的前进/后退按钮触发）时才可用。

savePosition保存了页面滚动条的位置：{ top: number , left: number }。

const router = createRouter({
    history: createWebHistory(),
    scrollBehavior: (to, from, savePosition) => {
        return { top: 0, left: 0 }
    }
})

延迟滚动

当处理过渡时，我们希望等待过渡结束后再滚动。要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。

const router = createRouter({
    history: createWebHistory(),
    scrollBehavior: (to, from, savePosition) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({ top: 0, left: 0 })
            }, 1000)
        })
    }
})

页面跳转后的一秒后再进行滚动。

第十二章-滚动行为

滚动行为

延迟滚动