javascript - VueRouter2.0 分页参数问题

问题描述

问 题

用VueRouter2.0做分页的时候遇到问题
目前当前分页和分页显示数量记录在page和pageSize变量中，现在的问题是翻页后用户刷新页面后会回到第一页，无法记录当前页

代码:
    export default {
      components: { LayoutContent },
      data(){
        return {
            page: 1,
            pageSize: 20,
            total:0,
            list:[]
        }
      },
      created(){
        this.loadData()
      },
      methods:{
          ...mapActions([
            'list'
          ]),
          loadData(){
            let pageSize = this.pageSize
            let page = this.page
    
            this.list({page,pageSize}).then((data) => {
                this.total = data.total
                this.list = data.list
            })
          },
          pageSizeChange(size){
            this.pageSize=size
            this.loadData()
          },
          pageChange(page){
            this.page=page
            this.loadData()
          }
      }
    }
    

于是想改成在url后面带上参数来记录page和pageSize,可是经过测试，url地址并不会随着query参数的改变而更改...

代码:
export default {
  components: { LayoutContent },
  data(){
    return {
        page: 1,
        pageSize: 20,
        total:0,
        list:[]
    }
  },
  created(){
    this.loadData()
  },
  beforeRouteUpdate(to,from,next){
    this.page = to.query.page
    this.pageSize = to.query.pageSize
    this.loadData()
  },
  methods:{
      ...mapActions([
        'list'
      ]),
      loadData(){
        let pageSize = this.pageSize
        let page = this.page

        this.list({page,pageSize}).then((data) => {
            this.total = data.total
            this.list = data.list
        })
      },
      pageSizeChange(size){
        this.route(this.page, size)
      },
      pageChange(page){
        this.route(page,this.pageSize)
      },
      route(page,pageSize){
        this.$router.push({path:`/list`, query:{page,pageSize}})
      }
  }
}

当前页地址http://xxx/#list,调用this.$router.push({path:/list, query:{page,pageSize}})后地址依然是http://xxx/#list,而不是http:://xxx/#list?page=x&page...最后没办法只能直接通过修改location来解决，不知道VueRoute本身有没办法做到？？？

解决方案

在官方论坛问了下，原来是版本问题，升级VueRouter2到2.5.3版本后正常，结贴！

这篇关于javascript - VueRouter2.0 分页参数问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！