Vue页面刷新后如何维持v-else状态而非默认v-if状态？

核心原因 #

页面刷新时Vue实例会重新初始化，响应式数据isLoginFormSent会回到初始值。你现在刷新后显示v-if对应的CodeForm，说明isLoginFormSent的初始值被设为了true，或是之前通过操作把它存在了本地存储（如localStorage）里，刷新时又读取了这个值。

解决方案 #

方案1：修正初始值 #

直接把isLoginFormSent的初始值设为false，页面加载时默认触发v-else逻辑，显示LoginForm：

<script setup>
import { ref } from 'vue'
// 初始值设为false，确保刷新后默认显示LoginForm
const isLoginFormSent = ref(false)

// 提交LoginForm后的切换逻辑
const handleLoginSubmit = () => {
  isLoginFormSent.value = true
}
</script>

<template>
  <CodeForm v-if="isLoginFormSent" />
  <LoginForm v-else @submit="handleLoginSubmit" />
</template>

方案2：清除本地存储的持久化值（若之前使用过） #

如果之前为了记住状态，把isLoginFormSent存到了localStorage或sessionStorage，刷新时会读取该值导致回到v-if状态。这种情况需在页面初始化时清除或不读取该值：

<script setup>
import { ref, onMounted } from 'vue'
const isLoginFormSent = ref(false)

onMounted(() => {
  // 清除可能存在的本地存储值，避免干扰初始状态
  localStorage.removeItem('isLoginFormSent')
})

// 切换逻辑
const handleLoginSubmit = () => {
  isLoginFormSent.value = true
  // 若不需要刷新后保留状态，注释掉本地存储的代码
  // localStorage.setItem('isLoginFormSent', 'true')
}
</script>

方案3：基于后端状态判断（可选） #

如果需要根据用户实际登录状态切换组件，不要依赖本地存储，而是从后端接口获取状态，初始默认未登录：

<script setup>
import { ref, onMounted } from 'vue'
const isLoginFormSent = ref(false)

onMounted(async () => {
  // 调用后端接口检查登录状态
  const res = await fetch('/api/check-login-status')
  const data = await res.json()
  // 仅当后端返回已登录时，才切换到CodeForm，否则默认显示LoginForm
  isLoginFormSent.value = data.isLoggedIn
})
</script>

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