Vue-router가 페이지를 새로고침하면 상태가 상실됩니다.이 문제를 회피하려면 어떻게 해야 합니까?

Vue-router가 페이지를 새로고침하면 상태가 상실됩니다.이 문제를 회피하려면 어떻게 해야 합니까?

5개의 컴포넌트로 분할된 폼이 있으며 사용자는 스텝퍼를 통해 폼을 탐색할 수 있습니다(프로젝트에 vue-material을 사용하고 있습니다).나는 그것을 위해 vue-router를 사용한다.단, 여기서 심각한 문제가 발생하고 있습니다.컴포넌트가 이미 채워진 경로로 돌아오면 스토어의 모든 정보가 손실됩니다(vuex를 사용하고 있습니다).즉, 사용자가 폼의 첫 번째 스텝을 채우고 스텝2로 넘어가면 1개의 데이터를 사용할 수 없게 되어 폼이 완전히 비어 버립니다(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)
}

상세 정보: 다른 입력을 입력하면 스토어가 새로운 값으로 갱신되어 변환이 동작하고 있음을 알 수 있습니다.

우선 Vuex는 브라우저에 데이터를 저장하지 않고 메모리에만 저장합니다.즉, vuex persisted state와 같은 서드파티 플러그인을 설치하거나 사용자 고유의 메서드를 에 쓸 수 있습니다.set그리고.get스토리지에서 다음과 같은 항목을 찾을 수 있습니다.

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

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

제 생각엔router-link또는$router.push().

Vue:

import Vue from 'vue'
import Router from 'vue-router'
import Projet1 from '@/components/Fiches/Projet/Projet1'
import Projet2 from '@/components/Fiches/Projet/Projet2'
import Projets from '@/components/Fiches/Projet/Projet' //with props

Vue.use(Router)     

export default new Router({
routes: [
{
  path: '/',
  name: 'Home',
  component: Projet1 // default project
},
    {
  path: '/Projet1',  // url for the same component
  name: 'Projet1',
  component: Projet1
},
{
  path: '/Project2',
  name: 'Projet2', // url for the another component
  component: Projet2
},
{
  path: '/Project/:id',
  name: 'Projets', // url for a component with props 
  component: Projet,
  props: true
}
]
})

HTML: 새로고침 없이 Projet을 호출하는 방법router-link

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

js: 라우터 푸시를 추가합니다.

updateProjectName () {
  this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
  this.$router.push('/' + this.project.projectName)
}

당신의 질문은 Kristianmandrup에 의해 시작된 문제처럼 보입니다.
라우터 링크가 있는 메뉴 또는 탭!?

언급URL : https://stackoverflow.com/questions/50785778/vue-router-reloads-page-and-i-lose-my-state-how-do-i-avoid-this