리스트에서 검색한 항목 다시 돌아와도 그대로 유지하기

 

 

처음에는 이 부분을 놓치고 단순히 목록 버튼이나 수정 버튼을 누르면 router.back()으로 동작하게 하였다.

그러다보니 이전에 리스트에서 만약 100페이지를 보고 있으면 해당 글 누르고 다시 돌아오면 다시 1페이지로 돌아오는것이다. 

이게 데이터가 점점 많아지니 너무 불편하다는 것을 깨달았다.

 

그래서 리스트에서 아카이브 디테일 페이지에 들어갈 수 있는 모든 경로에 route와 router를 사용하여

필요한 데이터를 넘겨주고 받아서 그전에 봤던 페이지수와 검색어 등을 유지하여 이전에 봤던 리스트와 똑같게 불러올 수 있게끔 수정하였다.

 

여러 페이지를 많이 수정하였는데 그 중 하나의 페이지만 예를 들어 보겠다.

우선 공개관리 페이지에서 꼭 넘겨줘야할 값들은 아래와 같다.

prevPage(페이지경로)

pageNum(페이지 번호)

open_yn(공개여부)

keyword(검색어)

reg_organ(등록기관)

kn_arch_id

 

위와 같이 여러 페이지에서 꼭 넘겨줘야하는 페이지들을 디테일 페이지로 보내고 다시 받아오고 이런식으로 진행하면 된다.

 

 

공개관리 리스트 페이지에서 데이터 링크 클릭할 때 위의 데이터들을 넘겨준다.

const linkClick = async (arch_id: number, arch_type: string) => {
  if (arch_type.includes("KN")) {
    router.push({
      path: "../knowArch/knowDetail",
      query: {
        kn_arch_id: arch_id,
        pageNum: pageNum.value,
        open_yn: open_yn.value,
        keyword: keyword.value,
        reg_organ: reg_organ.value,
        prevPage: "knowArch/knowOpenList",
      },
    });
  } else {
    router.push({
      path: "../digit/digitDetail",
      query: {
        arch_id: arch_id,
        pageNum: pageNum.value,
        open_yn: open_yn.value,
        keyword: keyword.value,
        reg_organ: reg_organ.value,
        prevPage: "knowArch/knowOpenList",
      },
    });
  }
};

 

 

이후 디테일 페이지에서 목록 버튼을 클릭할 때 동작되는 함수에 위에서 넘겨받은 데이터들이 링크에 쿼리로 보일것이다.

이것들을 들고와 다시 리스트로 보낸다.

 

// 목록버튼 클릭
const moveToList = () => {
  const pageNum = route.query.pageNum;
  const prevPage = route.query.prevPage;
  const open_yn = route.query.open_yn;
  const keyword = route.query.keyword;
  const reg_organ = route.query.reg_organ;

  router.push({
    path: `/dev/archive/${prevPage}`,
    query: {
      pageNum,
      open_yn,
      keyword,
      reg_organ,
    },
  });
};

 

 

리스트에서는 다시 이것들을 받아서 기존 값들에 매핑시켜준다.

const init = () => {
  const query = router.currentRoute.value.query;
  pageNum.value = query.pageNum ? Number(query.pageNum) : 1;
  open_yn.value = query.open_yn ? String(query.open_yn) : "";
  keyword.value = query.keyword ? String(query.keyword) : "";
  reg_organ.value = query.reg_organ ? String(query.reg_organ) : "";
};