按下浏览器后退按钮时如何防止Vuejs滚动到页面顶部

Question

当您按下后退按钮时，Vuejs似乎自动滚动到页面顶部，这很奇怪，因为默认情况下，当您在SPA中更改路线或转到新页面时，该窗口甚至不会滚动到顶部。您需要显式设置scrollBehaviour才能滚动到顶部。因此，如何防止按后退按钮时页面自动滚动到顶部。

beforeRouteLeave (to, from, next) {
    alert('Are you sure you want to leave this page and lose unsaved changes')
    // Notice how the page automatically scrolls to the top here even if the user were to response 'No' in a dialog situation
}

这里是问题的代码笔 https://codepen.io/anon/pen/bOGqVP

Answer 1

浏览器后退按钮滚动到顶部是由浏览器定义的。显然，我们可以通过添加以下代码行来禁用该行为

window.history.scrollRestoration = "manual"

添加此代码将告诉浏览器我们已经处理了滚动。 我只会在您的Codepen中对此进行测试。需要在其他浏览器中进行测试