带延迟路由过渡时，阻止浏览器导航滚动重置的方案

要解决这个问题，核心是精准区分浏览器原生导航（前进/后退）与主动路由跳转（如router-link、router.push），针对不同场景返回对应的滚动行为：

• 浏览器前进/后退时：直接返回保存的滚动位置，不触发顶部滚动逻辑
• 主动路由跳转时：保留延迟回到顶部的逻辑

修改后的scrollBehavior代码如下：

export const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        // 浏览器前进/后退导航：直接返回保存的滚动位置
        if (savedPosition) {
            return savedPosition;
        }

        // 带分页参数的路由：保留原有逻辑，回到对应位置
        if (to.query.page) {
            // 若需根据page参数计算滚动位置，可在此处调整，示例：
            // const pageNum = parseInt(to.query.page) || 1;
            // return { top: (pageNum - 1) * 800 }; // 假设每页高度800px
            return savedPosition || { left: 0, top: 0 };
        }

        // 主动跳转（router-link、push/replace等）：延迟回到顶部
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({ left: 0, top: 0 });
            }, 400);
        });
    },
});

关键逻辑说明 #

• savedPosition的核心作用：该参数仅在浏览器触发前进/后退（popstate事件）时才有值，是区分导航类型的关键标志。只要它存在，就直接返回对应位置，跳过顶部滚动逻辑。
• 主动跳转的延迟处理：保留你设置的400ms延迟，确保路由过渡动画完成后再滚动到顶部，避免视觉闪烁。
• 分页参数兼容：保留原有对to.query.page的处理逻辑，可根据实际业务需求调整滚动位置的计算方式。

如果仍存在页面先跳顶部再回到保存位置的问题，可能是路由过渡动画导致页面卸载时滚动条复位。可以配合组件过渡钩子，在过渡完成后再执行滚动逻辑，示例：

// 替换原有的Promise部分
return new Promise(resolve => {
    // 监听路由过渡完成事件（假设过渡组件name为"router-fade"）
    const transitionEnd = () => {
        resolve({ left: 0, top: 0 });
        document.removeEventListener('transitionend', transitionEnd);
    };
    document.addEventListener('transitionend', transitionEnd);
});

内容的提问来源于stack exchange，提问作者Michael