검색 조건 유지 기능 추가

beforeRouteLeave(to, from, next)

to: 라우트: 대상 Route 객체 로 이동

from: 라우트: 현재 라우트로 오기전 라우트

next: 함수: 이 함수는 훅을 해결하기 위해 호출, 액션은 next에 제공된 전달인자가 있음

beforeRouteLeave(to, from, next) {
	if(to.name === '이전 라우트'){   // 목적지 확인
    	const searchState = { // 검색 조건 저장
        	...  // 현재 페이지의 검색 관련 데이터
        }; 
         //sessionStorage에 'searchState'라는 이름으로 위 객체를 저장
         // 객체는 문자열 형태로 저장해야 하므로 JSON.stringify()를 사용합니다.
        sessionStorage.setItem("searchState", JSON.stringify(searchState));
       }
       next(); // next() 함수를 호출하여 사용자가 원래 가려던 페이지로 이동
    },

mounted() { // 페이지가 사용자에게 보여지는 시점에 코드를 실행하기 위해 사용
	// beforeRouteLeave에서 저장했던 검색 조건 데이터를 다시 불러온다.
    const savedState = sessionStorage.getItem("searchState");
    if (savedState) {
		const parsedState = JSON.parse(savedStated)
        ...
        // 한번 사용한 검색 조건 데이터를 바로 삭제함으로써, "뒤로 가기"로 돌아온 특수한 상황이 아닐 때에는 검색 조건이 복원되지 않도록 한다.
        sessionStorage.removeItem("searchState");
        }
        // 함수를 실행하여 데이터를 불러옴
        this.search(this.$route.params.PAGE ? this.$route.params.PAGE : 1);
 }