Verwendung von Vue.js zur Implementierung der Website-Paging-Funktion mit Abfragezeichenfolge

Question

Auf der Startseite habe ich einen Container, der einige Elemente anzeigt, und darunter eine Paginierung mit allen Seiten (1, 2, 3, 4...), die Paginierung funktioniert. Allerdings möchte ich meiner URL eine Abfrage hinzufügen. Wenn ich also etwas wie http://localhost:8080/twity/?page=10 eingebe, möchte ich zu dieser Seite gehen. Ich füge eine Abfrage wie diese hinzu, aber sie zeigt mir nur die Nummer der aktuellen Seite an, auf der ich mich befinde. Wenn ich die Nummer in der URL ändere, komme ich einfach zur ersten (Standard-)Seite zurück ...

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

Bei Bedarf kann ich meinen gesamten Home-Komponentencode teilen. Danke.

Homepage-Komponente

<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-Funktion (wird verwendet, um Daten aus der Datenbank abzurufen und das Paging zu steuern)

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);
       });
  },

你应该先使用路由预卫来拦截你的路由参数，然后根据参数手动决定你应该显示什么内容