滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router
能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意:这个功能只在支持history.pushState 的浏览器中可用。IE10+,主流浏览器都支持。
当创建一个 Router 实例,你可以提供一个scrollBehavior方法:
const router = createRouter({ history: createWebHashHistory(), routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
scrollBehavior方法接收to和from路由对象。第三个参数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 上方滚动 10pxreturn { // 也可以这么写 // 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) }) }, })
我们可以将其与页面级过渡组件的事件挂钩,以使滚动行为与你的页面过渡很好地结合起来,但由于使用场景可能存在的差异和复杂性,我们只是提供了这个基础来实现特定的用户场景。