通过延迟转换防止浏览器导航上的滚动重置

Question

我在路由器配置中设置了延迟。我希望能够单击浏览器导航按钮（后退和前进）返回到保存的位置，但是由于我有延迟并且

{ left:0, top:0 }

，它首先跳到顶部，然后发生延迟，然后我转到上一个路线并查看保存的位置。我不希望在按下浏览器按钮时在转换过程中应用

{ left:0, top:0 }

。但我希望它适用于所有其他情况，例如，当我单击

router-link

时。

export const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition || to.query.page) {
            return savedPosition;
        } else {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({ left: 0, top: 0 });
                }, 400);
            });
        }
    },
});

寻找可能的解决方案。

Answer 1

您可以尝试修改路由器配置中的

scrollBehavior

功能，以检查路线导航是否是由浏览器按钮（后退和前进）或通过任何其他方式（例如路由器链接）触发的。您可以使用

from

和

to

值通过匹配其 fullPath 来确定路由器是否由后退或前进按钮触发。