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

【问题标题】：How to prevent Vuejs scrolling to the top of the page when you press the browser back button按下浏览器后退按钮时如何防止Vuejs滚动到页面顶部
【发布时间】：2018-12-09 11:14:17
【问题描述】：

当你按下后退按钮时，看起来 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

【问题讨论】：

您可以返回一个解析为某个坐标对象而不是对象本身的承诺。这对你有帮助吗？
你能给我这个解决方案的链接吗先生！？我发现了一些类似的方法，但它们不起作用。经过进一步检查，当页面自动滚动到顶部时，似乎 scrollBehaviour 尚未启动。是浏览器或 vue 引擎中的其他东西导致了这种行为
如果即使scrollBehavior 被注释掉也存在问题，您可能应该寻找其他罪魁祸首。你点击的是href="#"的链接吗？
好奇怪。我刚刚做了一个codepen来显示这个问题。它实际上与滚动行为无关。它似乎是 vuejs 或浏览器内部的 codepen.io/anon/pen/bOGqVP

标签： vue.js vue-router

【解决方案1】：

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

window.history.scrollRestoration = "manual"

添加此代码将告诉浏览器我们处理滚动。我只在你的代码笔中测试这个。需要在其他浏览器中测试

【讨论】：

接受这是迄今为止我发现的唯一可行的方法。伟大的工作人。不太确定浏览器支持，但在 chrome 上工作对我来说没问题 :) 谢谢