vue 页面在手动刷新时 history 会被 push 进同样的记录，当调用$router.go(-1)或者$router.back()需要多次调用 history.back()才能后退

问题描述

• 当您手动刷新 Vue 页面时，浏览器会重新加载页面并将其添加到浏览器历史记录中。这可能会导致以下问题：

  • 用户点击后退按钮时，会返回到相同的页面，而不是上一页。
  • 点击多次后退按钮会返回到同一个页面。

解决方法

1. 可以把上一个页面的地址当作参数传递给当前页，点击回退按钮时调用$router 的 replace 方法退到上一页
2. 在页面的mounted 生命周期中监听页面的刷新事件

mounted () {
    window.addEventListener('pageshow', ()=> {
      this.$router.history.go(-1)
    })
  },
  beforeDestroy() {
    window.removeEventListener('pageshow', ()=> {
      this.$router.history.go(-1)
    });
  }

• this.$router.history.go(-1)相当于删除了当前历史记录,此时当你调用$router.go(-1)或者$router.back()就可以回退到上一个页面了

注意

pageshow 事件是一个在页面显示时触发的事件，具体来说，当浏览器加载页面时，如果该页面之前没有被缓存，则会触发 load 事件。而当用户从浏览器的历史记录中打开页面时（比如点击浏览器的“后退”按钮），或者当页面通过 JavaScript 加载时，会触发 pageshow 事件。

• 一些常见的使用场景包括：

  • 检测页面是否是第一次加载：可以利用 pageshow 事件与 load 事件的不同来判断页面是否是第一次加载。如果是第一次加载，则 load 事件会触发；否则，pageshow 事件会触发。

  • 处理页面状态：可以在 pageshow 事件中添加一些代码，根据页面的状态进行不同的处理。比如，如果用户从其他页面返回当前页面，则可以恢复之前页面的状态。

  • 统计页面访问量：可以在 pageshow 事件中发送统计数据，以了解页面的访问情况。