Vue：点击浏览器返回按钮时重置组件状态的解决方案

问题背景 #

开发的Vue登录页面包含第三方登录提供商列表，点击提供商后：

1. 将组件内的pageRedirect设为true，显示“Redirecting...”提示
2. 通过axios请求Go后端，后端用http.Redirect()返回重定向地址，前端通过window.location.href跳转至第三方登录页

但从第三方登录页点击浏览器返回按钮回到登录页时，pageRedirect仍为true，页面一直显示“Redirecting...”，无法回到提供商列表。若在重定向前设置pageRedirect=false，则会导致重定向失败。

解决方案 #

方案1：Vue Router路由守卫重置状态（适用于使用Vue Router的场景）

在登录组件中添加路由守卫，每次进入该路由时重置pageRedirect：

<template>
  <div v-if="pageRedirect">
    <h1>Redirecting...</h1>
  </div>
  <div v-else>
    <!-- 第三方登录提供商列表 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageRedirect: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 进入路由时重置状态
      vm.pageRedirect = false;
    });
  }
};
</script>

方案2：监听浏览器popstate事件

在组件挂载时监听浏览器的前进/后退事件，触发时重置状态：

<template>
  <!-- 模板内容同上 -->
</template>

<script>
export default {
  data() {
    return {
      pageRedirect: false
    };
  },
  mounted() {
    this.popStateHandler = () => {
      this.pageRedirect = false;
    };
    window.addEventListener('popstate', this.popStateHandler);
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('popstate', this.popStateHandler);
  }
};
</script>

方案3：组件挂载时直接重置状态

若登录组件为页面级组件，返回时会重新挂载，可直接在mounted钩子中重置状态：

<template>
  <!-- 模板内容同上 -->
</template>

<script>
export default {
  data() {
    return {
      pageRedirect: false
    };
  },
  mounted() {
    this.pageRedirect = false;
  }
};
</script>

额外优化：修复axios请求的this指向问题 #

原代码中使用普通函数作为then回调，this指向不是Vue实例，建议改为箭头函数，同时修正语法错误：

axios.post("/redirectUrl", body)
  .then(response => {
    this.pageRedirect = true;
    window.location.href = response.headers.location;
  })
  .catch(error => {
    // 显示错误信息
    this.pageRedirect = false; // 请求失败时也要重置状态
  });

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