重新加载页面时，如何保持在第二个表单上?Vue.js

Question

我需要创建一个只有2个页面的web应用程序。填写第一页的表格有两个阶段。我无法创建两个单独的页面。一页上有两张表格。那么，当页面被重新加载时，我如何保持在第二个表单上呢？

这是我的组件Register.vue：

<form v-if="step === 1">
<!-- some input fields about new user -->
</form>
<form v-if="step === 1">
<!-- some input fields about additional info about new user -->
</form>

我尝试过的：

data() {
return {
step: 1
}
},
mounted() {
if (performance.navigation.type == 1) {
if (this.step === 1) {
this.step = 1;
}
if (this.step === 2) {
this.step = 2;
}
}

}，

在创建的钩子中也尝试了同样的操作。

任何帮助都将不胜感激。

Answer 1

您可以将step保存在会话存储中，这样在重新加载时值就不会丢失。

设置值：

sessionStorage.setItem("step", step)

检索值：

sessionStorage.getItem("step")