Vue.js Vue路由器重新加载页面，我将失去状态，如何避免这种情况？

我有一个分为5个组件的表单，用户可以通过步进器在其中导航（我在我的项目中使用vue材质）。我使用vue路由器来实现这一点。然而，我在这里遇到了一个严重的问题：组件返回到已填充的路径时，会丢失存储中的所有信息（我使用的是vuex）。因此，要明确一点：如果用户填写表单的第一步，然后转到第二步，当他想回到第一步时，数据不再可用，表单完全为空（vuex中的状态也会重置）。我做错了什么

import Vue from 'vue'
import Router from 'vue-router'
import Projet from '@/components/Fiches/Projet/Projet'


Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',
  name: 'Home',
  component: Projet
},
//other routes here
]
})

这是html代码

<template>
 <div class="project-steppers">
   <md-steppers md-dynamic-height md-alternative>
      <md-step id="first" to="/Projet" md-label="Projet" />
       // other steps here
    </md-steppers>
  </div>
</template>

//这里还有其他步骤

以及我使用的一个输入示例：

      <md-field>
        <label for="project-name">Nom du projet</label>
        <md-input id="project-name"
                  v-model="project.projectName"
                  name="project-name"
                  @change="updateProjectName"/>
      </md-field>

[...]
  methods: {
updateProjectName () {
  this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
}

项目名称
[...]
方法：{
updateProjectName（）{
this.$store.commit（projectStore.MUTATE\u PROJECTNAME，this.project.PROJECTNAME）
}

---

更多信息：当我填充不同的输入时，我看到存储被更新为新值，因此变异正在工作。

我认为应该使用

路由器链接
或
$router.push（）

Vue：

HTML：一种无需重新加载路由器链接即可调用Projet的方法

<template>
<router-link to="/Home"></router>
<router-link to="/Projet1"></router>
<router-link to="/Projet2"></router>
</template>

你的问题看起来像是克里斯蒂安·曼德鲁普所提出的问题：

我认为应该使用
路由器链接
或
$router.push（）

Vue：

HTML：一种无需重新加载路由器链接即可调用Projet的方法

<template>
<router-link to="/Home"></router>
<router-link to="/Projet1"></router>
<router-link to="/Projet2"></router>
</template>

你的问题看起来像是克里斯蒂安·曼德鲁普所提出的问题：

首先，Vuex不在浏览器中存储数据，只在内存中存储。这意味着您可以安装第三方插件，如或编写自己的方法来设置
和
从存储中获取项目，例如：

const storage = localStorage.getItem('key');

new Vuex({
   state: {
     yourProp: storage ?
        ? JSON.parse(storage.yourDataKey)
        : 'default-value'
   },
   actions: {...}
   mutations: {...}
})

首先，Vuex不在浏览器中存储数据—只存储在内存中。这意味着您可以安装第三方插件，如或编写自己的方法来设置和获取存储中的项目，例如：

const storage = localStorage.getItem('key');

new Vuex({
   state: {
     yourProp: storage ?
        ? JSON.parse(storage.yourDataKey)
        : 'default-value'
   },
   actions: {...}
   mutations: {...}
})

您可以为每个步骤使用选项卡，而不是路由更改。刷新页面或更改路由时，状态将丢失。您从存储中的何处读取信息？您应该在创建组件时执行此操作，以便填充字段。您可以为每个步骤使用选项卡，而不是路由更改。刷新页面或更改路由时，状态将丢失老化或更改路线。您从存储中的何处读取信息？您应该在创建组件时执行此操作，以便填充字段