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