javascript - Problème de paramètres de pagination VueRouter2.0

Question

J'ai rencontré un problème lors de l'utilisation de VueRouter2.0 pour la pagination.
Actuellement, la pagination actuelle et le nombre d'affichages de pagination sont enregistrés dans les variables page et pageSize. Le problème actuel est qu'après avoir tourné la page, l'utilisateur reviendra à la page. première page après avoir actualisé la page, et la page actuelle ne peut pas être enregistrée

.

代码:
    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()
          }
      }
    }
    

Je voulais donc le modifier pour inclure des paramètres après l'URL pour enregistrer la page et la taille de la page. Cependant, après le test, l'adresse de l'URL ne changera pas à mesure que les paramètres de la requête changent...

.

代码:
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}})
      }
  }
}

L'adresse actuelle de la page est http://xxx/#list. Après avoir appelé this.$router.push({path:/list, query:{page,pageSize}}), l'adresse est toujours http://xxx/#. list, pas http:://xxx/#list?page=x&page... En fin de compte, il n'y a pas d'autre moyen que de modifier directement l'emplacement. Je me demande si VueRoute elle-même peut le faire ? ? ?

Answer 1

Serait-il préférable de surveiller directement la page ou la taille de la page dans la montre