이전글/다음글 버튼 이용하여 페이지 이동하기
백엔드에서 받아온 이전글 번호/다음글 번호를 변수에 저장해준다
const handleData = async() => {
// 1. 게시글 1개 정보 가져오기
const url = `/ROOT/api/board/boardselectone.json?bno=${state.bno}`;
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
if(data.status === 200){
state.row = data.result;
state.Prevno = data.Prevno; // 이전 글 번호
state.Nextno = data.Nextno; // 다음 글 번호
}
2-1. router.push
를 이용하여 이전글/다음글로 이동한다
이동할 query값도 같이 넘겨준다
router.push({path:"컴포넌트명", query:{"넘겨줄 쿼리 이름" : "쿼리에 들어가야할 값"}});
⇒router.push({path:"/boardselectone", query:{bno:state.Prevno}});
2-2. handleData()
를 호출하기 전에 handleData()
에서 호출할 bno를 Prevno로 변경해준다
state.bno
=state.Prevno
2-3. bno가 변경 된 이후 handleData()
를 호출해준다
// 이전글
const handlePrev = async() => {
console.log('이전글 번호 => ', state.Prevno);
router.push({path:"/boardselectone", query:{bno:state.Prevno}});
state.bno = state.Prevno
handleData();
};
// 다음글
const handleNext = async() => {
console.log('다음글 번호 => ', state.Nextno);
router.push({path:"/boardselectone", query : { bno : state.Nextno }});
state.bno = state.Nextno
handleData();
handleData();
// router.push(`/boardselectone?bno=${state.Nextno}`);
};