uniapp verbirgt die aktuelle Seite, ohne sie zu schließen

Mit der kontinuierlichen Weiterentwicklung der mobilen Entwicklungstechnologie werden plattformübergreifende Entwicklungstools immer ausgereifter und perfekter. Unter diesen ist UniApp eines der beliebtesten plattformübergreifenden mobilen Entwicklungsframeworks in China. Es zeichnet sich durch hohe Effizienz, Einfachheit und Benutzerfreundlichkeit aus und ist damit die beste Wahl für Entwickler.

Während der Entwicklung stoßen wir häufig auf Anforderungen, die es erfordern, dass die aktuelle Seite ausgeblendet, aber nicht geschlossen wird. Nachdem wir beispielsweise eine neue Seite geöffnet haben, müssen wir die aktuelle Seite ausblenden. Zu diesem Zeitpunkt müssen wir einige Fähigkeiten beherrschen, um diese Funktion zu erreichen.

1. Der Routing-Modus von Vue-Router

Zunächst müssen wir wissen, dass Uniapp auf dem Vue-Framework basiert und Vue-Router im Vue-Framework verwendet wird, um Routensprünge zu implementieren Verwenden Sie den Routing-Modus von Vue-Router. Implementieren Sie die Funktion zum Ausblenden der aktuellen Seite. Die spezifische Methode lautet wie folgt:

1. Setzen Sie den Routing-Modus in der Datei router/index.js auf „Verlauf“

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   mode: 'history',
   routes: [
  {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/Login/Login')
  },
    // 其他路由配置...
   ]
})

2. Wo die aktuelle Seite ausgeblendet werden muss, verwenden Sie diese.$router.push, um den Routensprung zu implementieren

this.$router.push({ path: '/home', query: { isHide: true }})

Wobei der Abfrageparameter ein Objekt ist, das zur Übergabe einiger Daten verwendet wird. Hier legen wir ein isHide-Feld fest, um die Parameter zu markieren, die zum Ausblenden der aktuellen Seite erforderlich sind.

3. Verwenden Sie auf der ausgeblendeten Seite „Watch“, um Routing-Änderungen zu überwachen.

2. Verwenden Sie den Befehl v-show in Vue

Zusätzlich zur Verwendung von vue-router zum Implementieren von Routing-Sprüngen zum Ausblenden der aktuellen Seite können wir zur einfachen Implementierung auch den Befehl v-show in Vue verwenden. Die spezifische Methode ist wie folgt:

Verwenden Sie $emit, um ein benutzerdefiniertes Ereignis auszulösen, bei dem die aktuelle Seite ausgeblendet werden muss

watch: {
   '$route' () {
      if (this.$route.query.isHide) {
         this.$refs.currentView.style.display = 'none'
      }
   }
}

1. Verwenden Sie den Befehl v-show in der übergeordneten Komponente, um die aktuelle Seite zu steuern

this.$emit('hide')

2. Hier lösen wir es über $emit aus. Passen Sie das Ereignis an und hören Sie sich das Ereignis in der übergeordneten Komponente an, um die Funktion zum Ausblenden der aktuellen Seite zu realisieren. Wir können steuern, ob die aktuelle Seite angezeigt werden soll, indem wir den Wert der Variablen showCurrentPage steuern. Gleichzeitig können wir mit dieser Methode auch steuern, ob eine neue Seite angezeigt werden soll.

Zusammenfassung

Durch den Routing-Modus und die V-Show-Anweisung des Vue-Routers können wir die Funktion zum Ausblenden der aktuellen Seite problemlos implementieren. Natürlich muss die spezifische Implementierungsmethode noch an den tatsächlichen Bedarf angepasst werden.

Es ist zu beachten, dass bei Verwendung der oben genannten Methode zum Ausblenden der aktuellen Seite der Speicher der aktuellen Seite nicht freigegeben wird. Wenn die aktuelle Seite nicht mehr benötigt wird, ist es daher am besten, sie manuell zu zerstören, um Speicher zu vermeiden Lecks.

Das obige ist der detaillierte Inhalt vonuniapp verbirgt die aktuelle Seite, ohne sie zu schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!