Was sind die gängigen Routing- und Page-Jump-APIs von Uniapp?

Uniapp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf Vue.js basiert und die schnelle Erstellung von Multiplattform-Anwendungen wie Miniprogrammen, H5 und Apps unterstützt Umfangreiche Routing- und Seitensprung-API zur Realisierung von Sprüngen zwischen Anwendungen und Interaktion zwischen Seiten.

Lassen Sie uns die allgemeinen Routing- und Seitensprung-APIs von Uniapp im Detail vorstellen:

Routing

Routing bezieht sich auf die Sprungregeln zwischen Anwendungen. Uniapp bietet eine Vielfalt Verschiedene Routing-Konfigurationsmethoden, einschließlich globaler Routing-Konfiguration, seitenexklusiver Konfiguration, Komponenten-Routing-Konfiguration usw., können durch Routing schnelle Sprünge zwischen Anwendungen und Parameterübertragung zwischen Seiten erreichen.

1. Globale Routing-Konfiguration

Die globale Routing-Konfiguration umfasst alle Routing-Regeln der Anwendung, die speziell in der Datei main.js konfiguriert sind Die Methode lautet wie folgt:

import App from './App'

// 全局路由配置
const router = uni.createRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: () => import('@/pages/home/index.vue')
        },
        {
            path: '/category',
            name: 'category',
            component: () => import('@/pages/category/index.vue')
        },
        {
            path: '/goods/:id',
            name: 'goods',
            component: () => import('@/pages/goods/index.vue')
        },
        //...
    ]
})

App.mpType = 'app'
App.router = router
App.vue = new Vue({
    router,
    render: h => h(App)
}).$mount()

In der globalen Routing-Konfiguration können Sie mehrere Routing-Regeln definieren. Jede Routing-Regel enthält drei Attribute: Pfad, Name und Komponente. Unter diesen stellt Pfad den Pfad der Route dar, Name stellt den Namen der Route dar und Komponente stellt die Komponente dar, die der Route entspricht.

In Uniapp können Routing-Sprünge über APIs wie uni.navigateTo, uni.switchTab, uni.reLaunch usw. implementiert werden. Als Nächstes werden wir die Verwendung dieser APIs im Detail vorstellen.

2. Seiten-exklusive Routing-Konfiguration

Seiten-exklusive Routing-Konfiguration kann Routing-Regeln für bestimmte Seiten definieren und Routing-Regeln schreiben. In der Seitenkonfiguration können Die spezifische Methode lautet wie folgt:

<template>
  <view class="container">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'home',
  // 页面独享配置
  onUniNaviationBarTap(){
    uni.navigateTo({
      url:'/pages/category/index'
    })
  }
}
</script>

<style>
/* ... */
</style>

In der Seitenexklusivkonfiguration können Sie mehrere Routing-Regeln definieren und diese in Form von Ereignissen auslösen. Zu diesen Ereignissen gehören onLoad, onShow, onUnload, onHide usw. .

3. Komponenten-Routing-Konfiguration

Komponenten-Routing-Konfiguration kann Routing-Sprünge zwischen Komponenten realisieren und Routing-Regeln in die Komponenten schreiben. Spezifische Methoden wie folgt: # 🎜🎜#

<template>
  <view class="container" @click="goToGoodsDetail">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'product-card',
  methods: {
    goToGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goods/index?id=' + this.goodsId
      })
    },
  },
  props: {
    goodsId: {
      type: String,
      required: true,
    },
  },
}
</script>

<style>
/* ... */
</style>

Durch die Definition von Routing-Regeln in Komponenten und das Auslösen von uni.navigateTo können Sprünge zwischen Komponenten erreicht werden.

Seitensprung-API

Uniapp bietet eine Vielzahl von Seitensprung-APIs, darunter „navigateTo“, „redirectTo“, „switchTab“, „reLaunch“ usw. Über diese APIs können Anwendungen schnell gesprungen und parametrisiert werden Übertragung zwischen Seiten.

navigateTo

navigateTo ist eine der am häufigsten verwendeten Seitensprung-APIs, die zum Öffnen einer neuen Seite auf der aktuellen Seite verwendet wird. Die neue Seite kann über uni.navigateBack zur aktuellen Seite zurückkehren.

uni.navigateTo({
  url: '/pages/category/index'
})

In „navigateTo“ stellt die URL den Seitenpfad dar, zu dem gesprungen werden soll. Dabei kann es sich um einen relativen oder einen absoluten Pfad handeln.

redirectTo

redirectTo wird verwendet, um die aktuelle Seite zu schließen und eine neue Seite zu öffnen. Die neue Seite kann nicht über Uni zur aktuellen Seite zurückkehren .navigateBack.

uni.redirectTo({
  url: '/pages/category/index'
})

switchTab

switchTab wird zum Öffnen der Tab-Seite der Anwendung verwendet. Die Seite kann keine Parameter übergeben über onLoad auf der Tab-Seite.

uni.switchTab({
  url: '/pages/home/index'
})

reLaunch

reLaunch wird verwendet, um alle Seiten zu schließen und eine neue Seite zu öffnen, die über uni zur aktuellen Seite zurückgeführt werden kann. NavigierenZurück.

uni.reLaunch({
  url: '/pages/login/index'
})

Zusammenfassung

In diesem Artikel werden die gängigen Routing- und Seitensprung-APIs im Detail vorgestellt. Bei der Anwendungsentwicklung sind Routing und Seitensprünge ein sehr wichtiger Teil Mit diesen APIs können Sprünge zwischen Anwendungen und Interaktionen zwischen Seiten realisiert werden, was den Benutzern ein besseres Erlebnis und bessere Dienste bietet.

Das obige ist der detaillierte Inhalt vonWas sind die gängigen Routing- und Page-Jump-APIs von Uniapp?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!