也许这是一个奇怪的问题,但我是Vue的新手,我还没有找到答案. 当我使用v-if和v-Else时,一切都很正常:

<CodeForm v-if="isLoginFormSent" />
<LoginForm v-else />

但在我重新加载页面后,一切都返回到v-if状态.有没有办法确保在页面重新加载后显示v-Else状态?

推荐答案

这是Vue的预期行为,或者我们可以说这就是Vue的工作方式.在页面重新加载时,应用程序的状态为reset,因此根据初始条件或默认数据属性,组件将为re-rendered.

为了在页面刷新时也保存数据变量,您需要以某种方式使用HTML5Web存储机制将其存储在localStoragesessionStoragecookie中.

可以通过localStorage.setItem()进行设置:

localStorage.setItem('isLoginFormSent', JSON.stringify(<value>));

然后在created()mounted()生命周期钩子中加载页面:

localStorage.getItem('isLoginFormSent');

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

正在try 访问vutify中v-select(ItemProps)的嵌套json值

如何将外部 svg 转换为 Vue3 组件?

Vue 3 范围滑块中的多个值

为什么将 name 与 router-link 一起使用比仅使用 to 与 path 更好?

nuxt.js - 预加载 .woff 字体加载为@font-face

如何创建 vuetify 工具栏链接下拉菜单?

当前端和后端位于虚拟 docker 网络中时,如何使用 axios 寻址后端主机

ionic - `slot` 属性已被弃用 - eslint-plugin-vue

Vue router路由,Root Vue 没有数据?

Vue 组件 Vue-Instant

Vue路由安全

Vuetify v-btn 路由活动类问题

为什么 v-model 不适用于数组和 v-for 循环?

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

依赖关系甚至在 package.json 和 node_modules 中都没有定义

Vue路由在新页面上回到顶部

如何使用 Vuetify 验证复选框组

VueJS 按键查找元素