[Vue.js] Router 이전글/다음글 이동

Yeoonnii·2022년 11월 14일
0

Vue

목록 보기
8/13

이전글/다음글 버튼 이용하여 페이지 이동하기

1. 이전글 번호/다음글 번호 받아오기

백엔드에서 받아온 이전글 번호/다음글 번호를 변수에 저장해준다

        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. 이전페이지/다음페이지 이동하는 함수 생성

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()를 호출해준다


handlePrev()

        // 이전글
        const handlePrev = async() => {
            console.log('이전글 번호 => ', state.Prevno);
            router.push({path:"/boardselectone", query:{bno:state.Prevno}});

            state.bno = state.Prevno
            handleData();
        };

handleNext()

        // 다음글
        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}`);

        };

0개의 댓글