Vuex, Vue-라우터 및 처리 페이지 다시 로드(F5)

Vuex, Vue-라우터 및 처리 페이지 다시 로드(F5)

나는 지금 내가 만들고 있는 애플리케이션을 vue-roouter와 vuex를 사용하여 한 페이지짜리 애플리케이션으로 전환하는 중이다.하지만 이번이 첫 SPA라서 새로운 이슈에 반칙을 하고 있어.제품 목록과 편집 모드를 사용하여 원하는 대로 작업을 처리하고 성공적으로 라우트할 수 있었다./product/list그리고/product/edit그리고 (또는 -)F5를 사용하여 페이지를 다시 로드할 때 편집 모드에 대한 (놀랍지 않게) 문제가 발생했다는 것을 알게 되었다.편집 모드는 목록 모드에서 설정된 상태와 다시 로드 후 이 상태가 발생하지 않은 상태에 따라 달라진다.

그래서 제 질문은 일반적이고, 건축적인 겁니다.이런 일을 하는 가장 좋은 방법은 무엇일까?Vuex 상태를 로컬 스토리지 또는 세션 스토리지로 유지하여 다시 로드할 수 있도록 해야 하는가?아니면 (현재 내가 하고 있지 않은) 경로 URL의 정보를 사용하여 상태를 재생성할 수 있도록 해야 하는가?즉, URL을 다음으로 사용하는 대신/product/list난 가져야 한다./product/list?search=whatever&order=field다시 로드할 때 검색 및 정렬이 다시 실행될 수 있도록 한다.마찬가지로, 대신에/product/edit, 그랬으면 좋았을 텐데./product/edit?id=12345페이지를 새로 고치면 특정 제품을 다시 로드할 수 있도록.

localStorage에 대한 상태를 유지하는 것이 선호된다(스토리지가 없는 브라우저와 경쟁할 필요가 없음).하지만 SPA 디자인에 잘못된 방법으로 접근하고 있는 것이 아닌지 궁금한데, 한 페이지 내에서 모든 것이 이루어지더라도 REST 용어로 생각해야 할 것 같아.

나에게 있어 완벽하게 작용한 것은 다음과 같았다.

const router = new Router ({

   // mode: "history",

   history: true,

   hashbang: false,

   root: "/your app directory",

   base: "",

      ...
      ...

나는 URL에 있는 ID를 보관한 다음 다시 로드할 때 데이터를 다시 설정하는 방식으로 이 작업을 처리했다.로컬 스토리지에 계속 액세스할 수 있지만 다른 사용자가 해당 URL을 다른 사용자에게 보내면 어떻게 되십니까?아니면 책갈피를 채운 다음 브라우저 캐시를 지우시겠습니까?대부분의 사용자들은 자신이 사용하던 페이지로 돌아갈 수 있을 것으로 예상할 수 있다.

참조URL: https://stackoverflow.com/questions/41856142/vuex-vue-router-and-handling-page-reload-f5