So springen Sie, um Parameter in Uniapp abzurufen

1. Einführung in uniapp

uniapp ist ein Tool zur Entwicklung plattformübergreifender Anwendungen. Es verwendet das vue.js-Entwicklungsframework, die WebStorm-IDE und die integrierte Entwicklungsumgebung HBuilderX, um die Entwicklung von WeChat-Applets, Baidu-Applets usw. zu unterstützen Toutiao-Applets. Programme, H5, App und andere Anwendungen.

2. Uniapp-Sprungseite

In Uniapp werden Seitensprünge durch Routing durchgeführt. Zu den Grundbausteinen des Routings gehören Pfade und Parameter. Unter anderem wird der Pfad verwendet, um den Seitenpfad anzugeben, zu dem gesprungen werden soll, und die Parameter sind einige zusätzliche Informationen wie ID, Name usw.

In uniapp verwenden wir die Funktion uni.navigateTo(), um den Seitensprungvorgang abzuschließen. Die spezifischen Implementierungsschritte sind wie folgt:

1. Definieren Sie eine Schaltfläche oder einen Link. Wenn auf die Schaltfläche oder den Link geklickt wird, wird eine Sprungoperation ausgeführt.

<button @click="toDetail">跳转到详情页</button>

2. Funktion, die erfordert, dass der Seitenpfad, zu dem gesprungen werden soll, als Parameter übergeben wird.

toDetail() {
   uni.navigateTo({
        url:'./detail?id=1'
   })
}

3 Rufen Sie auf der Seite, zu der gesprungen werden soll, die übergebenen Parameter ab.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

3. Wie Uniapp Seitenparameter erhält

Es gibt zwei Hauptmethoden, um Seitenparameter in Uniapp abzurufen: Abfrage und Parameter. Im vorherigen Beispiel haben wir eine Abfrage verwendet, um Parameter zu übergeben und abzurufen.

1. Abfrageparameter

Abfrageparameter ist ein Parameter in der URL. Nach Abschluss des Sprungs durch die Funktion uni.navigateTo() wird der Parameter an das Ende der URL der Zielseite gespleißt, z : ./detail?id=1. Auf der Zielseite können die übergebenen Parameter über this.$route.query abgerufen werden.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

2. params-Parameter

params-Parameter sind Parameter, die über das Routing-Objekt übergeben werden. Sie werden über den zweiten Parameter der Funktion uni.navigateTo() übergeben, wenn zur Seite gesprungen wird. Auf der Zielseite können die übergebenen Parameter über this.$route.params abgerufen werden.

toDetail() {
   uni.navigateTo({
        url:'./detail',
        params: {
            id: 1
        }
   })
}

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.params.id;
      }
   }
</script>

Zusammenfassung

Durch die Einleitung dieses Artikels verstehen wir die grundlegende Art und Weise, wie Uniapp Seitensprünge durchführt und wie man Seitenparameter erhält. In tatsächlichen Projekten ist es notwendig, die geeignete Methode zum Übertragen und Erhalten von Parametern entsprechend den spezifischen Geschäftsanforderungen auszuwählen. Durch das Erlernen und Beherrschen dieser Grundkenntnisse können wir Uniapp besser entwickeln, die Entwicklungseffizienz verbessern und Benutzern ein besseres Anwendungserlebnis bieten.

Das obige ist der detaillierte Inhalt vonSo springen Sie, um Parameter in Uniapp abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!