如何解决单击浏览器的后退按钮时将客户返回到相同位置
我想要做什么? 我想记住用户在页面上的当前位置,因此一旦他/他导航到另一个页面,然后使用浏览器“返回”按钮返回到该位置。请注意,只有当用户点击浏览器后退按钮时,我才需要保持这种行为。
我是如何努力实现的? 当用户点击一个 href 时,我正在使用一种方法来替换状态。然后页面被重定向到正确的位置。
window.history.replaceState({ scrollToProduct: true,productCode: 'produt-XXXX' },document.title,`${window.location.href}?product-code=produt-XXXX`);
然后我试图在我的 App.vue 中注册 popstate 侦听器
beforeMount() {
window.onpopstate = function(e) {
console.log(e);
};
}
我的问题在哪里? 不幸的是,popstate 侦听器没有被附加,所以我无法捕捉到“返回”按钮的点击。
我也尝试过使用 router.push。
this.$router.push({ name: 'NameOfComponent' });
有趣的是,我被导航到另一个页面(无需重新加载页面),当我单击后退按钮时,popstate 确实起作用了。不幸的是,我无法将任何内容传递到历史状态。
有人可以帮忙吗?
PS:我没有使用 SPA,而是在每个页面上刷新。
解决方法
如果您没有正确注册 vue-router 或者您没有将 Vue 用作 SPA,您将无法使用 vue-router。
您需要的是 history.back() 或 history.go(-1)。
https://developer.mozilla.org/en-US/docs/Web/API/History/back
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。