javascript - VueRouter2.0 分頁參數問題

Question

用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本身有沒辦法做到？ ？ ？

Answer 1

watch裡直接監聽page或pagesize是不是會比較好