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? ? ?
