javascript – Problem mit VueRouter2.0-Paging-Parametern

Question

Bei der Verwendung von VueRouter2.0 für Paging ist ein Problem aufgetreten.
Derzeit werden das aktuelle Paging und die Anzahl der Paging-Anzeigen in den Variablen page und pageSize aufgezeichnet. Das aktuelle Problem besteht darin, dass der Benutzer nach dem Umblättern zur Seite zurückkehrt erste Seite nach dem Aktualisieren der Seite, und die aktuelle Seite kann nicht aufgezeichnet werden

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

Also wollte ich es ändern, um Parameter nach der URL einzufügen, um die Seite und die Seitengröße aufzuzeichnen. Nach dem Test ändert sich die URL-Adresse jedoch nicht, wenn sich die Abfrageparameter ändern...

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

Die aktuelle Seitenadresse lautet http://xxx/#list. Nach dem Aufruf von this.$router.push({path:/list, query:{page,pageSize}}) lautet die Adresse immer noch http://xxx/#. list, nicht http:://xxx/#list?page=x&page... Letztendlich gibt es keine andere Möglichkeit, als den Speicherort direkt zu ändern. Ich frage mich, ob VueRoute selbst dies tun kann. ? ?

Answer 1

watch里直接监听page或pagesize是不是会更好