javascript - VueRouter2.0 paging parameter problem

Question

I encountered problems when using VueRouter2.0 for paging
Currently, the current paging and the number of paging displays are recorded in the page and pageSize variables. The current problem is that after turning the page, the user will return to the first page after refreshing the page. Unable to record current page

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

So I wanted to change it to include parameters after the url to record the page and pageSize. However, after testing, the url address will not change as the query parameters change...

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

The current page address is http://xxx/#list. After calling this.$router.push({path:/list, query:{page,pageSize}}), the address is still http: //xxx/#list, instead of http:://xxx/#list?page=x&page... In the end, there is no way but to directly modify the location. I wonder if VueRoute itself can do it? ? ?

Answer 1

Would it be better to directly monitor page or pagesize in watch