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>

navigateTo

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

redirectTo

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

switchTab

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

reLaunch

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

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!