Vue 中 `keepAlive: true` 为什么页面还会刷新？

Vue 中 keepAlive: true 为什么页面还会刷新？

keepAlive: true 是 Vue 的一个选项，用于告诉 Vue 是否应该缓存当前组件。但是，这并不会阻止页面的刷新。

如果您想要在页面刷新时保持组件的状态，您可以尝试使用 Vue Router 提供的导航守卫和 localStorage 等技术来实现。

例如，您可以在 beforeRouteLeave 导航守卫中保存组件的状态，在 created 生命周期中加载保存的状态。

代码示例:

// 组件内部
beforeRouteLeave(to, from, next) {
  // 保存组件状态到 localStorage
  localStorage.setItem('componentState', JSON.stringify(this.state));
  next();
},

created() {
  // 从 localStorage 加载组件状态
  const state = localStorage.getItem('componentState');
  if (state) {
    this.state = JSON.parse(state);
  }
}

注意:

• 使用 localStorage 存储敏感数据时，请确保对数据进行加密。
• 导航守卫和 localStorage 只是实现页面刷新后保持组件状态的两种方法，还有其他方法可以实现相同的效果。