Using Vue.js to implement website paging function with query string

Question

In the home page, I have a container that displays some elements and below it a pagination with all the pages (1, 2, 3, 4...), the pagination is working. However, I want to add a query to my URL, so if I enter something like http://localhost:8080/twity/?page=10, I want to go to that page. I'm adding a query like this but it only shows me the number of the current page I'm on, if I change the number in the url it just returns me to the first (default) page...

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

I can share my entire Home component code if needed. Thanks.

Homepage component

<template>
  <div class="main">
    <div class="tweets-container">
      <div
        v-for="tweet in tweets"
        :key="tweet.id"
      >
        <div class="tweet-card">
          <div class="username-time">
            <div class="user-info">
              <p class="name">
                {{ tweet.twitter_name }}
              </p>
              <p class="user-info-p">
                @
              </p>
              <p class="username">
                <a
                  :href="'https://twitter.com/' + tweet.twitter_username"
                  class="twitter_link"
                  target="_blank"
                >
                  {{ tweet.twitter_username }}
                </a>
              </p>
            </div>
            <div class="time">
              <p>{{ tweet.added_at }}</p>
            </div>
          </div>
          <div class="text">
            <p>{{ tweet.tweet_text }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="reply-container">
      <h1>Replies</h1>
    </div>
    <ul class="pagination">
      <li class="page-item">
        <p
          class="hover-underline-animation"
          @click="previousPage"
        >
          Previous
        </p>
      </li>
      <li class="page-item all-pages">
        <div
          v-for="page in numberOfPages"
          :key="page"
          :class="page == currentPage ? 'active' : 'hover-underline-animation'"
          @click="getTweets(page)"
        >
          <p>{{ page }}</p>
        </div>
      </li>
      <li class="page-item">
        <p
          class="hover-underline-animation"
          @click="nextPage"
        >
          Next
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import { getUserToken } from '@/auth/auth'
import moment from 'moment'

export default {
  components: {},
  data() {
    return {
      tweets: [],
      currentPage: 1,
      numberOfPages: 0,
    }
  },
  beforeMount() {
    this.getTweets()
  },
  methods: {
    nextPage() {
      this.currentPage += 1
      this.tweets = []
      this.getTweets()
    },
    previousPage() {
      this.currentPage -= 1
      this.tweets = []
      this.getTweets()
    },
    getTweets(newCurrent) {
      this.tweets = []
      const API_URL = `${this.$server}/api/twitter/tweets`
      const params = {
        token: getUserToken(),
        page: this.currentPage,
        newCurrentPage: newCurrent,
      }
      axios.post(API_URL, null, { params }).then(res => {
        this.currentPage = res.data.page
        this.numberOfPages = res.data.numberOfPages
        // Set query string
        this.$router.push({ query: { page: this.currentPage } })

        res.data.tweets.forEach(tweet => {
          const tweetData = {
            id: tweet.id,
            tweet_text: tweet.tweet_text,
            twitter_name: tweet.twitter_name,
            twitter_username: tweet.twitter_username,
            added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
          }
          this.tweets.push(tweetData)
        })
      })
    },
  },
}
</script>

Nodejs function (used to get data from the database and control paging)

getAllTweets: async (req) => {
        // get number of all rows in table
        let tweetsNum = await SQL('SELECT COUNT(*) as total FROM twitter_tweets')
        tweetsNum = tweetsNum[0].total

        // number of tweets
        const pageSize = 25
        let skip = 0

        const numberOfPages = Math.ceil(tweetsNum / pageSize)

        // page number from client
        const newCurrentPage = req.query.newCurrentPage
        let currentPage = req.query.page
        
        // check if there is newCurrentPage
        if(newCurrentPage != undefined) {
            skip = (newCurrentPage - 1) * pageSize
            currentPage = newCurrentPage
        } else {
            // check if page is valid)
            if(currentPage < 1) {
                currentPage = 1
            } else if(currentPage > numberOfPages) {
                currentPage = numberOfPages
            }
            
            // offset
            skip = (currentPage - 1) * pageSize
        }

        // paginate tweets from db
        const tweetsFromDb = await SQL('SELECT * FROM twitter_tweets ORDER BY added_at DESC LIMIT ?,?', [skip, pageSize])

        let tweets = Object.values(JSON.parse(JSON.stringify(tweetsFromDb)))

        const data = {
            tweets: tweets,
            page: parseInt(currentPage),
            numberOfPages: parseInt(numberOfPages),
        }

    return data
}

Answer 1

    beforeRouteUpdate(to,from,next) {
      yourFunctionXXXXX(to.query);
      next();
   },

 beforeRouteEnter(to, from, next) {
         next((vm) => {
            vm.yourFunctionXXXXX(to.query);
       });
  },

You should first use route guard to intercept your route parameters, and then manually decide what content you should display based on the parameters