使用Vue.js实现带有查询字符串的网站分页功能
P粉809110129
P粉809110129 2024-02-17 13:49:04
[Vue.js讨论组]

在主页中,我有一个容器,其中显示一些元素,下面有一个包含所有页面(1、2、3、4...)的分页,分页正在工作。但是,我想在我的网址中添加一个查询,因此如果输入类似 http://localhost:8080/twity/?page=10 的内容,我想转到该页面。我正在添加这样的查询,但它只显示我所在的当前页面的编号,如果我更改网址中的编号,它只会将我返回到第一个(默认)页面...

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

如果需要,我可以分享我的整个 Home 组件代码。谢谢。

主页组件



Nodejs函数(用于从数据库获取数据并控制分页)

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
}

P粉809110129
P粉809110129

全部回复(1)
P粉998100648

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

 beforeRouteEnter(to, from, next) {
         next((vm) => {
            vm.yourFunctionXXXXX(to.query);
       });
  },
你应该先使用路由预卫来拦截你的路由参数,然后根据参数手动决定你应该显示什么内容
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号