history.push跳转,如何避免页面回到顶部
时间: 2024-04-29 22:22:10 浏览: 148
用jQuery实现返回顶部滑动跳转效果
可以在路由跳转时,使用 `scrollPositionRestoration` 属性来控制页面滚动位置的恢复行为。具体来说,可以将该属性设置为 `enabled`,然后在页面中使用 `scrollTo` 方法,将滚动位置保存到 sessionStorage 或 localStorage 中,在路由跳转后再读取并恢复该位置。示例代码如下:
```javascript
// 在路由配置中设置 scrollPositionRestoration 属性
const routes = [
{
path: '/example',
component: ExampleComponent,
scrollPositionRestoration: 'enabled'
}
]
// 在页面中保存滚动位置
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('scrollPosition', window.scrollY)
})
// 在路由跳转后恢复滚动位置
const savedScrollPosition = sessionStorage.getItem('scrollPosition')
if (savedScrollPosition) {
window.scrollTo(0, savedScrollPosition)
sessionStorage.removeItem('scrollPosition')
}
```
注意,在使用 `scrollTo` 方法时,必须等待页面完全加载后才能读取正确的滚动位置,否则会出现错误的滚动位置。可以使用 `window.onload` 或 `Vue.nextTick` 等方式来确保页面加载完成后再读取滚动位置。
阅读全文