J'ai rencontré un problème lors de l'utilisation de VueRouter2.0 pour la pagination.
Actuellement, la pagination actuelle et le nombre d'affichages de pagination sont enregistrés dans les variables page et pageSize. Le problème actuel est qu'après avoir tourné la page, l'utilisateur reviendra à la page. première page après avoir actualisé la page, et la page actuelle ne peut pas être enregistrée
代码:
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()
}
}
}
Je voulais donc le modifier pour inclure des paramètres après l'URL pour enregistrer la page et la taille de la page. Cependant, après le test, l'adresse de l'URL ne changera pas à mesure que les paramètres de la requête changent...
.代码:
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}})
}
}
}
L'adresse actuelle de la page est http://xxx/#list. Après avoir appelé this.$router.push({path:/list
, query:{page,pageSize}}), l'adresse est toujours http://xxx/#. list, pas http:://xxx/#list?page=x&page... En fin de compte, il n'y a pas d'autre moyen que de modifier directement l'emplacement. Je me demande si VueRoute elle-même peut le faire ? ? ?
Serait-il préférable de surveiller directement la page ou la taille de la page dans la montre