Comment implémenter le saut de page et la navigation par routage dans Uniapp

Comment implémenter le saut de page et la navigation par itinéraire dans uniapp

Dans le développement d'uniapp, le saut de page et la navigation par itinéraire sont des exigences courantes. Cet article explique comment implémenter les sauts de page et la navigation par routage dans Uniapp, et fournit des exemples de code spécifiques.

1. Saut de page

Dans uniapp, vous pouvez utiliser la méthode uni.navigateTo pour accéder à la page. Cette méthode accepte un paramètre d'objet, où url est le chemin de la page vers laquelle accéder, qui peut être un chemin absolu ou un chemin relatif.

1. Ajoutez le code de saut dans l'événement déclencheur de la page de saut. L'exemple de code est le suivant :

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

2. Dans le fichier de configuration de la page cible, vous devez ajouter le chemin de la page correspondant dans le tableau pages. L'exemple de code est le suivant :

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ]
}

3. Dans le fichier vue de la page cible, le rendu de la page et la liaison des données peuvent être effectués via les composants et méthodes fournis par uni-app. L'exemple de code est le suivant :

<template>
  <view>
    <text>{{content}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '这是详情页面'
    }
  }
}
</script>

.

2. Navigation d'itinéraire

Dans uniapp, vous pouvez utiliser les méthodes uni .switchTab et uni.reLaunch pour la navigation d'itinéraire. Parmi eux, uni.switchTab est utilisé pour accéder à la page tabBar et fermer toutes les autres pages non tabBar ; uni.reLaunch est utilisé pour fermer toutes les pages, puis accéder à la page spécifiée.

1. Utilisez uni.switchTab pour la navigation par itinéraire, l'exemple de code est le suivant :

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

2. Utilisez uni.reLaunch pour la navigation par itinéraire, l'exemple de code est le suivant :

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

Ce qui précède représente les bases de la mise en œuvre de la page navigation par saut et itinéraire dans uniapp Exemple de code. Grâce à la méthode ci-dessus, nous pouvons facilement réaliser la navigation et passer d'une page à l'autre, offrant ainsi des fonctions pratiques pour le développement d'Uniapp. J'espère que cet article vous sera utile.

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!