Vue 경로 가 페이지 상 태 를 복구 하 는 방법 으로 되 돌아 갑 니 다.

경로 파라미터,경로 탐색 수위:페이지 후퇴 시 검색 결 과 를 유지 합 니 다.
필요 한 장면:첫 페이지 에서 내용 을 검색 하고 자세 한 페이지 로 이동 하려 면 누 르 십시오.페이지 는 뒤로 물 러 나 홈 페이지 로 돌아 가 검색 결 과 를 유지 합 니 다.
프로젝트:경로 매개 변수;경로 수비
필요 설명
Vue 개발 전단 을 사용 할 때 한 장면 을 만 났 습 니 다.첫 페이지 에서 데이터 검색 을 하고 검색 결 과 를 클릭 하여 상세 페이지 에 들 어가 상세 페이지 를 조회 한 후 홈 페이지 로 돌아 갑 니 다.그러나 이때 이전의 검색 기록 과 페이지 넘 김 이 사라 져 사용자 체험 이 좋 지 않 았 다.따라서 돌아 온 후에 점프 전의 페이지 매개 변수 상 태 를 회복 해 야 합 니 다.
물론 조건 이 허락 된다 면 가장 쉬 운 방법 은 검색 결 과 를 클릭 하여 새 페이지 로 여 는 것 입 니 다(예 를 들 어 바 이 두 처럼).그러나 현재 수 요 는 완전한 Vue 개발 프로젝트 입 니 다.사이트 외부 주 소 를 여 는 것 이 아니 라 상세 한 내용 도 많 지 않 습 니 다.새 페이지 를 사용 하 는 것 이 적당 하지 않 습 니 다(성능 이 떨 어 지고 대량의 탭 을 만 들 기 쉽 습 니 다).
여기 서 비교적 실현 하기 쉬 운 두 가지 해결 방안 을 소개 한다.

방안 1:검색 파 라미 터 를 루트 파라미터(route.query)에 저장 하고 페이지 를 불 러 올 때 파라미터 에 따라 검색

장점:갱신 에 영향 을 주지 않 습 니 다.실현 이 간단 하 다
단점:매개 변 수 는 기본 유형,길이 제한 만 받 을 수 있 습 니 다.경로 가 보기 흉 하 다.브 라 우 저 에 만 유효 합 니 다.수 동 으로 첫 페이지 로 넘 어가 면 안 됩 니 다.

방안 2:경로 수비 고 리 를 사용 하여 페이지 를 떠 나 기 전에 로 컬 저장 페이지 파라미터(vuex,Local Storage 등)

장점:매개 변수 유형 길이 가 자 유 롭 습 니 다.경로 가 상 큼 하고 보기 좋다.임의의 방식 으로 홈 페이지 로 돌아 가 는 것 이 모두 유효 합 니 다.
단점:데이터 저장 작업 을 추가 로 해 야 합 니 다.store 모드 나 vuex 를 사용 하면 페이지 를 새로 고침 할 수 없습니다.
프로젝트 1:루트 매개 변수
만약 에 매개 변수 가 많 지 않 고 경로 뒤에 큰 매개 변수(강박 증 의 눈물 을 흘 리 는 것)가 있 는 것 을 개의 치 않 는 다 면 파 라 메 터 를 경로 에 직접 넣 을 수 있다(예 를 들 어 바 이 두 는 바로 이렇다.baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0x8a76279a000e2979&...를 볼 수 있 고 정말 긴 꼬치 이다).
검색 을 클릭 한 후 vue router 를 사용 하여 점프 및 전송:

//     

search(param) {
  //     
  this.$router.push({
      name: "Index",
      query: { ...this.queryParam },	//         
  });
},

여기 서 query 전송 인삼 과 params 전송 인삼 의 차 이 를 주의해 야 합 니 다.전자의 매개 변 수 는?k1=v1&k2=v2형식 으로 경로 뒤에 계속 되 고 주소 표시 줄 에서 직접 볼 수 있 기 때문에 페이지 전환,새로 고침 의 영향 을 받 지 않 습 니 다.후 자 는 첫 번 째 로 해당 페이지 로 넘 어 갈 때 만 역할 을 하고 다시 뛰 어 넘 으 면 없어진다.그래서 여 기 는 query 전 삼 을 사용 해 야 합 니 다.파 라 메 터 를 형식 에 따라 path 에 수 동 으로 쓰 는 것 도 가능 하지만 읽 기 쉽 고 확장 성 이 현저히 떨 어 집 니 다.간단 한 매개 변수 가 한두 개 밖 에 없 는 한 추천 하지 않 습 니 다.
또한 이 매개 변 수 는 경로 에 넣 어야 하기 때문에 기본 형식의 키 값 만 맞 을 수 있 고 배열 이나 대상 은 잘 지원 되 지 않 습 니 다.매개 변수 가 간단 하면 해당 대상 을 매개 변수 로 펼 칠 수 있 습 니 다.

//       

mounted() {
  //    $route   $router
  if (this.$route.query.type) {
    let type = this.$route.query.type;
    let keyword = this.$route.query.keyword;
    // ...        
    //       
  } else {
    //       （                 ，             ）
  }
},

프로젝트 2:로 컬 저장 매개 변수
저장 하고 싶 은 매개 변 수 는 세 개의 대상 이기 때문에 키 값 으로 펼 치 는 것 이 너무 불편 하기 때문에 이 방안 을 사 용 했 습 니 다.프로젝트 에 vuex 를 사 용 했 기 때문에 vuex 에 도 존재 하고 실제 상황 에 따라 어디 에 나 존재 해도 됩 니 다.vuex 의 단점 은 새로 고침 하 자마자 없어 지고 검색 결과 와 같은 최적화 체험 성격 의 기능 에 큰 영향 을 미 치지 않 는 다 는 것 이다.대응 하 는 수요 가 있 으 면 local storage 에 저장 할 수 있 습 니 다.
제 요구 에 따라 파 라 메 터 를 바 꾸 는 방법 이 많 기 때문에 변경 할 때 파 라 메 터 를 저장 하 는 것 이 너무 번 거 롭 고 실수 나 누락 되 기 쉽 습 니 다.따라서 경로 가 바 뀌 기 전에 필요 한 인 자 를 통일 적 으로 저장 하 는 것 을 선택 합 니 다.
Vue Router 는경로 내 비게 이 션 수위시리즈 API 를 제공 하여 해당 기능 을 실현 합 니 다.구체 적 으로 는 전체적인 사전/해석/후방 수비,경로 설정 수비,구성 요소 수비 등 방식 을 포함 합 니 다.이른바'수비'는 사실 과장 과정 에서 의'갈고리'에 해당 하 며 익숙 한 created,mounted 와 같다.
완전한 내 비게 이 션 분석 프로 세 스:

내 비게 이 션 이 촉발 되 었 다.

살 아 있 지 않 은 구성 요소 에서beforeRouteLeave수 비 를 호출 합 니 다.

전체적인beforeEach수 비 를 호출 합 니 다.

재 활용 구성 요소 에서beforeRouteUpdate수위(2.2+)를 호출 합 니 다.

경로 설정 에서 호출beforeEnter.

비동기 경로 구성 요 소 를 분석 합 니 다.

활성 화 된 구성 요소 에서 호출beforeRouteEnter.

전역beforeResolve수비(2.5+)를 호출 합 니 다.

내 비게 이 션 이 확인 됐다.

전역 의afterEach갈 고 리 를 호출 합 니 다.

DOM 업 데 이 트 를 촉발 합 니 다.

수위 에서beforeRouteEnter에 게 전 달 된 반전 함 수 를 호출 합 니 다.만 든 구성 요소 인 스 턴 스 는 반전 함수 의 매개 변수 로 전 달 됩 니 다.

분명히 여기 서next갈 고 리 를 사용 하면 요 구 를 잘 만족 시 킬 수 있다.

//       

beforeRouteLeave(to, from, next) {
  // vuex     
  this.$store.commit("updateRevert", {
    query: this.queryParam,
    page: this.pageParam,
    filter: this.filter,
  });
  next();	//            
},

페이지 를 불 러 올 때 저 장 된 인자 가 있 는 지 확인 하고 있 으 면 복구 작업 을 진행 합 니 다.

//       

mounted() {
  //    vuex            
  if (this.$store.state.revert) {
    const revert = this.$store.state.revert;
    this.queryParam = revert.query;
    this.pageParam = revert.page;	//           
    //     
  } else {
    //       （                 ，             ）
  }
},

결어&참고 문헌
페이지 상 태 를 저장 하 는 두 가지 방식 의 공유 입 니 다.그 중에서 많은 선택 이 그 당시 의 실제 수요 와 관련 된 것 이기 때문에 모든 장면 에서 최선 의 방안 이 될 수 있 는 것 은 아니다.당신 의 구체 적 인 수요 에 대해 글 속 의 방안 이 부족 하거나 더 간단 한 방법 이 있 을 수 있 습 니 다.글 에서 가능 한 한 모든 절차 의 실제 수요 와 근 거 를 설명 하여 참고 하도록 하 였 다.글 속 의 누락 과 부족 에 대해 평론 에서 토론 하고 지적 하 는 것 을 환영 합 니 다.
프로 그래 밍 식 내 비게 이 션
경로 내 비게 이 션 수위
Vue 경로 가 페이지 상태 로 돌아 가 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 경로 의 페이지 상태 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!