Vue router使用beforeRouteEnter获取上一页名称，页面刷新后按钮文本消失如何解决

核心原因 #

页面刷新后Vue实例会重新初始化，此时相当于直接在当前页面URL下加载应用，vue-router的beforeRouteEnter守卫无法获取到上一页的路由信息，存储在组件data中的prevRoute值会重置为空。

解决方案 #

使用sessionStorage持久化存储上一页路由名称，sessionStorage属于会话级存储，同一标签页下刷新数据不会丢失，关闭标签页后会自动清除，不会污染全局存储，正好适配该场景。

代码修改示例

模板部分保持原有逻辑不变，script部分调整如下：

<script>
export default {
  name: 'TEST',
  data() {
    return {
      // 设置兜底默认值，避免无来源访问时按钮空白
      prevRoute: '首页'
    }
  },
  created() {
    // 页面刷新后从sessionStorage读取存储的上一页路由名称
    const savedPrevRoute = sessionStorage.getItem('prevRoute')
    if (savedPrevRoute) {
      this.prevRoute = savedPrevRoute
    }
  },
  methods: {
    goBack() {
      if (sessionStorage.getItem('prevRoute')) {
        this.$router.go(-1)
        // 回退后清除存储，避免其他页面复用逻辑出错
        sessionStorage.removeItem('prevRoute')
      } else {
        // 无历史路由时跳转到首页，避免跳转到浏览器历史中的外部站点
        this.$router.push('/')
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 仅存在上一页路由时才赋值并存储
      if (from.name) {
        vm.prevRoute = from.name
        sessionStorage.setItem('prevRoute', from.name)
      }
    })
  },
}
</script>

拓展优化 #

如果项目中多个页面都需要使用返回按钮，可以把上一页路由的存储逻辑抽成全局路由守卫，配合Vuex+持久化插件统一管理，无需每个页面单独编写重复逻辑。

内容的提问来源于stack exchange，提问作者test