Vue.js를 사용하여 쿼리 문자열로 웹사이트 페이징 기능 구현

Question

홈 페이지에는 일부 요소를 표시하는 컨테이너가 있고 그 아래에는 모든 페이지(1, 2, 3, 4...)가 포함된 페이지 매김이 있으며 페이지 매김이 작동 중입니다. 하지만 URL에 쿼리를 추가하고 싶기 때문에 http://localhost:8080/twity/?page=10 과 같이 입력하면 해당 페이지로 이동하고 싶습니다. 이와 같은 쿼리를 추가하고 있는데 현재 내가 있는 페이지의 번호만 표시됩니다. URL의 번호를 변경하면 첫 번째(기본) 페이지로 돌아갑니다...

으아아아

필요한 경우 전체 홈 구성 요소 코드를 공유할 수 있습니다. 감사해요.

홈 페이지 구성 요소

으아아아

Nodejs 함수(데이터베이스에서 데이터를 가져오고 페이징을 제어하는 ​​데 사용됨)

this.$router.push({ query: { page: this.currentPage } })

Answer 1

으아악 먼저 경로 가드를 사용하여 경로 매개변수를 가로채고 매개변수에 따라 표시해야 할 콘텐츠를 수동으로 결정해야 합니다