자세 한 내용 은 Vue Router 내 비게 이 션 갈고리 와 Vuex 를 사용 하여 후퇴 상태 저장 을 실현 합 니 다.

죄 송 하지만 제목 이 좀 지루 합 니 다.이번 유수 장 부 는 확실히 비교적 세부 적 인 작은 것 에 속 하기 때 문 입 니 다.아래 에 상세 하 게 말씀 드 리 겠 습 니 다.
수요
최근 에 사용 하고 있 습 니 다electron-vue크로스 플랫폼 의 데스크 톱 엔 드 소프트웨어 를 개발 하고 있 습 니 다.방금 몇 페이지 를 손 으로 썼 는데 문제 가 발생 했 습 니 다.데스크 톱 엔 드 소프트웨어 는 보통 네 비게 이 션 수요 가 있 습 니 다.다음 그림 과 같 습 니 다.

탐색 단추
반환 단 추 를 누 르 면 이전 페이지 로 돌아 가 고 이전 페이지 의 내용 을 표시 합 니 다.사실 앱 뿐만 아니 라 일반 웹 페이지 에서 도 이러한 수요 가 있 습 니 다.특히 vue 를 사용 하여 SPA 를 쓸 때.
프로젝트 의 내 비게 이 션 은 거의 router.push({name:xxx',params:{xxx:123...})방식 을 사용 합 니 다.이러한 방식 으로 인 한 직접적인 문 제 는 후퇴 버튼(router.go(-1)을 누 르 면 history 에 URL 만 저장 하고 params 대상 을 잃 어 버 려 서 params 에 의존 하 는 페이지 렌 더 링 이 이상 하 다 는 것 이다.
해결
사실 생각 은 매우 간단 하 다.후퇴 작업 에서 params 를 잃 어 버 렸 으 니 우 리 는 당연히 params 를 어떻게 저장 하 는 지 생각 할 것 이다.그래,이렇게 거 칠 어.잃 어 버 리 려 면 내 가 보관 해 줄 게!
어떻게 저장 하 는 지:사실 이것 은 크로스 구성 요소 통신 문제 라 고 생각 하지 않 아 도 됩 니 다.그래서 자 연 스 럽 습 니 다.Vuex 로 저장 하 는 것 이 가장 상식 적 입 니 다!
언제 저장 합 니까?첫 번 째 반응 은 router.push({name:xxx',params:{xxx:123...})를 호출 할 때 저장 합 니 다.그리고 이 URL 로 탐색 하면 params 가 없 으 면 vuex store 에서 가 져 오 십시오.맞 는 것 같 아,그냥 좀 귀 찮 은 것 같 아!!당황 하지 마 세 요.네 비게 이 션 갈고리 router.beforeech(to,from,next)=>{/...}가 있 습 니 다!
이름 그대로 vue-router 가 제공 하 는 네 비게 이 션 갈 고 리 는 네 비게 이 션 을 차단 하여 점프 를 완성 하거나 취소 하 는 데 사 용 됩 니 다.
여기까지 말 하면 너 는 나의 해결 방향 을 완전히 알 아야 한다.그러면 다음은 쓸데없는 말 을 많이 하지 않 겠 다.코드 를 올 려 라.

/*
Vuex store       RouterParams
*/
//...
const state = {
 //      map，key：  name，value：  params
 paramMap: {}
}

const mutations = {
 REFRESHPARAM (state, paramKV) {
 //mutation，          ？
 Vue.set(state.paramMap, paramKV.key, paramKV.value)
 }
}
//...

/*
router           
*/
const router = new VueRouter({ ... }) //router
router.beforeEach((to, from, next) => {
 //       params  "    "
 if (Object.keys(to.params).length === 0) {
 //  store     params，            ，     
 Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {})
 }
 //     params  
 store.commit('REFRESHPARAM', {key: to.name, value: to.params})
 next() //       ，      “  ”   。:-D
})
//...

쉽 죠?총 몇 줄 의 코드 O(∩∩)O~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.