vue.js - 当您按下浏览器后退按钮时,如何防止 Vuejs 滚动到页面顶部

标签 vue.js vue-router

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

最佳答案

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

window.history.scrollRestoration = "manual"

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

关于vue.js - 当您按下浏览器后退按钮时,如何防止 Vuejs 滚动到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53691711/

相关文章:

vue.js - 如何修复 "Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json."问题?

vue.js - 使用 SCSS 和 Vue 3 避免 v-deep 重复

vue.js - Vuetify - 修复了带有绝对页脚的 NavigationDrawer 留下了不必要的空间

javascript - 如何获取 Vue 路由器的历史记录?

javascript - 如何在 Vue-router 中使用 addroutes 方法?

javascript - Vue 3 <router-view> 在使用历史模式构建后得到评论

vue.js - 单击事件路由器链接

vue.js - 使用 Vue.js 向 JSON 中的元素添加属性

vue.js - 如何将数据传递给 Vue.js 中的路由器 View

vue.js - <router-link> Vue Router @click 事件