학원/프로젝트

[Vue.JS] Vue CDN 사용시 쿼리 저장 이벤트

행수쌤 2023. 7. 22. 14:35
728x90
반응형

쿼리값 page 필드로 반환 메서드

initializePageFromQuery() {
    const queryParams = new URLSearchParams(window.location.search);
    const queryKey = queryParams.get('queryKey');
    this.adminMenu = adminMenu;
},

쿼리 업데이트를 위한 page 데이터 변경 및 쿼리 변경 메서드

saveQuery(queryInfo){
    const queryParams = new URLSearchParams(window.location.search);
    queryParams.set('queryInfo', queryInfo);
    const newURL = `?`+queryParams.toString();
    //쿼리 히스토리 저장
    window.history.pushState({ query: queryParams.toString() }, '', newURL);
},

mounted()

//쿼리 초기화 및 변화 감지
this.initializePageFromQuery();
//뒤로가기, 앞으로가기 누르면 이전 쿼리 반환
window.addEventListener('popstate', this.initializePageFromQuery);
728x90
반응형