Explication détaillée de la méthode de routage des paramètres dans uniapp

Uniapp est un framework de développement front-end multiplateforme. Sa plus grande caractéristique est qu'il peut développer des applications pour plusieurs plates-formes en même temps. Dans Uniapp, le passage des paramètres de routage est une fonction très courante et importante. Cet article présentera en détail la méthode de routage des paramètres dans Uniapp et fournira des exemples de code spécifiques pour aider chacun à mieux la comprendre et l'appliquer.

Les paramètres de routage dans Uniapp peuvent être divisés en deux situations : passer de la page A à la page B et transmettre les paramètres à la page B ; la page B reçoit les paramètres et les utilise.

1. Passez de la page A à la page B et transmettez les paramètres à la page B

1. Passez les paramètres lors du saut (transmettez les paramètres via l'URL)

Dans les méthodes de saut telles que uni.navigateTo ou uni.redirectTo, les paramètres peuvent être transmis à la page cible via l'URL. L'exemple de code est le suivant :

uni.navigateTo({
  url: '/pages/b-page/b-page?id=1&name=uniapp',
  success: (res) => {
    console.log('跳转成功')
  }
})

Dans la page cible B, les paramètres transmis peuvent être obtenus en obtenant les paramètres d'URL. L'exemple de code est le suivant :

export default {
  onLoad(options) {
    console.log(options.id)   // 输出：1
    console.log(options.name) // 输出：uniapp
  }
}

2. Passage de paramètres lors d'un saut (passage de paramètres via une requête)

En plus de passer des paramètres via l'URL, Uniapp fournit également un autre moyen de transmettre des paramètres, c'est-à-dire passer des paramètres via une requête. L'exemple de code est le suivant :

uni.navigateTo({
  url: '/pages/b-page/b-page',
  query: {
    id: 1,
    name: 'uniapp'
  },
  success: (res) => {
    console.log('跳转成功')
  }
})

Dans la page cible B, vous pouvez obtenir les paramètres transmis en récupérant les paramètres de requête. L'exemple de code est le suivant :

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
  }
}

2. La page B reçoit les paramètres et utilise

Que les paramètres soient passés via l'URL ou via la requête, les paramètres passés peuvent être obtenus dans la page cible B. Dans la page cible B, il peut être traité dans la fonction de cycle de vie onLoad ou à d'autres endroits où les paramètres doivent être utilisés. L'exemple de code est le suivant :

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

En plus de recevoir des paramètres dans la fonction de cycle de vie, vous pouvez également définir une variable dans l'attribut data pour recevoir et utiliser des paramètres. L'exemple de code est le suivant :

export default {
  data() {
    return {
      id: null,
      name: ''
    }
  },
  onLoad(query) {
    this.id = query.id
    this.name = query.name
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

Avec la méthode ci-dessus, nous pouvons facilement implémenter le transfert de paramètres entre les pages dans Uniapp. Qu'il s'agisse de transmettre des paramètres via une URL ou de transmettre des paramètres via une requête, Uniapp fournit un moyen simple et flexible de l'implémenter et est largement utilisé dans le développement réel. J'espère que les instructions et les exemples de code contenus dans cet article pourront aider les lecteurs à mieux comprendre et utiliser la fonction de transmission des paramètres de routage dans Uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!