javascript - Problème de paramètres de pagination VueRouter2.0
高洛峰
高洛峰 2017-05-19 10:08:54
0
1
686

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

répondre à tous(1)
洪涛

Serait-il préférable de surveiller directement la page ou la taille de la page dans la montre

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal