Next.js切换语言时router.push设scroll:false仍滚动到顶部如何解决
问题根源
你调用router.push时的传参格式错误,Next.js Pages Router 中 router.push 方法仅接收三个参数,所有配置项(包括locale、scroll)都需要放在第三个参数的配置对象内,你当前将{scroll: false}放在了不存在的第四个参数位置,属于无效配置,所以滚动限制没有生效。
修复方案
直接调整changeLanguage内的router.push参数结构即可:
const changeLanguage = (e) => { const locale = e.value; // 取值为['en', 'sv', 'ru', 'fr']其中之一 router.push(pathname, asPath, { locale, scroll: false }); };
如果调整后仍偶发滚动到顶部的问题,可以增加手动记录滚动位置的兜底逻辑:
const changeLanguage = async (e) => { const locale = e.value; // 提前记录当前页面滚动位置 const currentScrollY = window.scrollY; await router.push(pathname, asPath, { locale, scroll: false }); // 路由切换完成后强制恢复滚动位置 window.scrollTo({ top: currentScrollY, behavior: 'instant' }); };
内容的提问来源于stack exchange,提问作者Y H R
相关产品推荐
相关产品推荐

