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