Quelles sont les API courantes de routage et de saut de page d'uniapp ?

Uniapp est un cadre de développement d'applications multiplateformes basé sur Vue.js grâce à des spécifications de syntaxe unifiées et des API encapsulées, il prend en charge la construction rapide d'applications multiplateformes telles que des mini-programmes, H5 et Apps, et fournit un routage et des pages riches. jumps.API pour réaliser des sauts entre applications et des interactions entre pages.

Présentons en détail les API communes de routage et de saut de page d'Uniapp :

Routage

Le routage fait référence aux règles de saut entre les applications. Uniapp fournit une variété de méthodes de configuration de routage, y compris la configuration de routage global, le routage unique de page, etc. , configuration du routage des composants, etc., grâce au routage, des sauts rapides entre les applications et le transfert de paramètres entre les pages peuvent être réalisés.

1. Configuration du routage global

La configuration du routage global contient toutes les règles de routage de l'application, qui sont configurées dans le fichier main.js. La méthode spécifique est la suivante :

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()

Dans la configuration du routage global, plusieurs règles de routage peuvent. être définie, chaque règle de routage contient trois attributs : chemin, nom et composant. Parmi eux, path représente le chemin de l'itinéraire, name représente le nom de l'itinéraire et composant représente le composant correspondant à l'itinéraire.

Dans Uniapp, les sauts de routage peuvent être implémentés via des API telles que uni.navigateTo, uni.switchTab, uni.reLaunch, etc. Ensuite, nous présenterons en détail l'utilisation de ces API.

2. Configuration de routage exclusif à la page

La configuration de routage exclusif à la page peut définir des règles de routage pour une page spécifique et écrire les règles de routage dans la configuration de la page. La méthode spécifique est la suivante :

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

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

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

Configuration exclusive sur la page. Dans , vous pouvez définir plusieurs règles de routage et les déclencher sous forme d'événements. Ces événements incluent onLoad, onShow, onUnload, onHide, etc.

3. Configuration du routage des composants

La configuration du routage des composants peut réaliser des sauts de routage entre les composants et écrire des règles de routage dans les composants. La méthode spécifique est la suivante :

<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>

En définissant des règles de routage dans le composant et en déclenchant uni.navigateTo , vous peut réaliser des sauts entre les composants.

API Page Jump

Uniapp fournit une variété d'API de saut de page, notamment naviguerTo, redirectTo, switchTab, reLaunch, etc. Grâce à ces API, des sauts rapides entre les applications et le transfert de paramètres entre les pages peuvent être réalisés.

1. navigateTo

navigateTo est l'une des API de saut de page les plus couramment utilisées, qui est utilisée pour ouvrir une nouvelle page sur la page actuelle. La nouvelle page peut revenir à la page actuelle via uni.navigateBack.

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

DansnavigaTo, l'url représente le chemin de la page vers laquelle accéder, qui peut être un chemin relatif ou un chemin absolu.

2. redirectTo

redirectTo est utilisé pour fermer la page actuelle et ouvrir une nouvelle page. La nouvelle page ne peut pas revenir à la page actuelle via uni.navigateBack.

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

3. switchTab

switchTab est utilisé pour ouvrir la page Onglet de l'application. La page ne peut pas transmettre de paramètres. L'opération d'initialisation peut être implémentée via onLoad sur la page Onglet.

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

4. reLaunch

reLaunch est utilisé pour fermer toutes les pages et ouvrir une nouvelle page, et la nouvelle page peut revenir à la page actuelle via uni.navigateBack.

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

Résumé

Cet article présente en détail les API de routage et de saut de page courantes d'Uniapp. Dans le développement d'applications, le routage et les sauts de page sont un élément très important grâce à une configuration et à l'utilisation flexibles de ces API, les applications peuvent être réalisées. et les interactions entre les pages offrent aux utilisateurs une meilleure expérience et de meilleurs services.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!