So übergeben Sie Parameter in Uniapp

Angesichts der Beliebtheit mobiler Anwendungen und der sich ändernden Bedürfnisse der Benutzer entscheiden sich immer mehr Entwickler für die Verwendung von Uniapp für die Entwicklung. Es stellt sich jedoch ein wichtiges Problem, wie Parameter zwischen verschiedenen Seiten übergeben werden. In diesem Artikel stellen wir detailliert vor, wie Parameter in Uniapp übergeben werden.

1. Parameter über URL übergeben

URL ist eine Möglichkeit, den Speicherort einer Datei in einem Computernetzwerk zu beschreiben. In uniapp können Parameter per URL übergeben werden. In der Webentwicklung können Parameter über eine Abfragezeichenfolge übergeben werden. Es gibt zwei Möglichkeiten, URL-Parameter in Uniapp zu übergeben: Route Jump und H5 Page Jump:

1. Route Jump

Uniapp bietet einige Routing-bezogene APIs, darunter uni.navigateTo und uni.redirectTo. Diese beiden APIs können Parameter übertragen beim Springen. Beim Springen können Parameter in Form von Objekten an die URL übergeben und in Form von Abfragezeichenfolgen dargestellt werden. Wie unten gezeigt:

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

Auf der übersprungenen Seite kann über dieses.$route.query-Objekt auf die übergebenen Parameter zugegriffen werden. Wie unten gezeigt:

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

Es ist zu beachten, dass die durch den Routensprung übergebenen Parameter im Verlauf der Navigationsleiste gespeichert werden. Daher können Sie über den Zurück-Vorgang zur vorherigen Seite zurückkehren und die Parameter übertragen.

2.h5-Seitensprung

In Uniapp können Sie location.search verwenden, um die Abfragezeichenfolge und Parameter in der URL abzurufen, zum Beispiel:

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

Es ist zu beachten, dass Sie beim Springen zur h5-Seite dies tun müssen Manuell Verarbeiten Sie die URL.

2. Übergeben von Parametern über Vuex

In uniapp können Sie Vuex für die Statusverwaltung verwenden, sodass wir auch Parameter über Vuex übergeben können.

1. Erstellen Sie einen Shop auf der Seite

Auf jeder Seite müssen wir zuerst einen Shop erstellen, um Parameter zu übergeben. Wie unten gezeigt:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

Führen Sie den Store wie folgt in die Seite ein:

import store from '@/store/index'

2. Übergeben Sie Parameter auf der Seite.

Auf der Seite, die Parameter übergeben muss, können Sie die Parameter an den Store übergeben, indem Sie eine Mutation senden. Wie unten gezeigt:

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

Nachdem die Mutation übermittelt wurde, wird der entsprechende Status im Store aktualisiert.

3. Parameter auf der Seite abrufen

Auf der Seite, auf der Sie Parameter abrufen müssen, können Sie die im Store gespeicherten Parameter über das Objekt $store.state abrufen. Wie unten gezeigt:

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

Es ist zu beachten, dass die Verwendung von Vuex für die Parameterübergabe die Einführung von Vuex erfordert und auf jeder Seite ein Geschäft erstellt werden muss.

Zusammenfassung

In Uniapp können wir Parameter über URL und Vuex übergeben. Für die einfache Parameterübergabe können wir die URL zum Übergeben von Parametern verwenden und je nach Situation einen Routensprung oder einen H5-Seitensprung wählen. Für komplexe Szenarien können wir Vuex für die Parameterübergabe verwenden, müssen jedoch darauf achten, auf jeder Seite einen Store zu erstellen. Unabhängig davon, welche Methode verwendet wird, muss die Auswahl auf den tatsächlichen Bedürfnissen basieren.

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