scrollBehavior(to, from, savedPosition) { if (savedPosition) { console.log(123) return savedPosition; } else { return { x: 0, y: 0 }; } },不生效的原因
时间: 2023-07-16 13:14:16 浏览: 90
`scrollBehavior` 是 Vue Router 提供的一个路由跳转时控制页面滚动行为的方法。当使用 `scrollBehavior` 后,每次路由跳转时,它将会被调用,并且其返回值将会影响到页面的滚动行为。
如果你的 `scrollBehavior` 方法不生效,可能会有以下几个原因:
1. 没有将 `scrollBehavior` 配置到 Vue Router 中。确保你在创建 Vue Router 实例时,已经将该方法配置到了其中,例如:
```
const router = new VueRouter({
routes: [...],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}
});
```
2. 路由跳转时没有保存滚动位置。在使用 `scrollBehavior` 时,你需要确保在路由跳转时,将当前页面的滚动位置保存下来,以便后续恢复。你可以通过在路由组件中的 `beforeRouteLeave` 钩子中保存滚动位置,例如:
```
export default {
...
beforeRouteLeave(to, from, next) {
// 保存滚动位置
window.scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
next();
}
}
```
3. 路由被缓存导致 `scrollBehavior` 不生效。如果你的路由被缓存了,那么在切换路由时 `scrollBehavior` 方法将不会被调用,因为实际上并没有进行真正的路由跳转。你可以通过在路由组件中的 `activated` 钩子中手动恢复滚动位置,例如:
```
export default {
...
activated() {
// 恢复滚动位置
window.scrollTo(0, window.scrollPosition || 0);
}
}
```
希望以上解答可以帮助你解决问题。
阅读全文