Comment sauter pour obtenir les paramètres dans Uniapp

1. Introduction à uniapp

uniapp est un outil de développement d'applications multiplateformes. Il utilise le framework de développement vue.js, l'environnement de développement intégré WebStorm IDE et HBuilderX pour prendre en charge le développement d'applets WeChat, d'applets Alipay, d'applets Baidu et Applets Toutiao. Programmes, H5, App et autres applications.

2. page de saut uniapp

Dans uniapp, les sauts de page sont effectués via le routage. Les éléments de base du routage incluent les chemins et les paramètres. Parmi eux, le chemin est utilisé pour spécifier le chemin de la page vers laquelle accéder, et les paramètres sont des informations supplémentaires, telles que l'identifiant, le nom, etc.

Dans uniapp, nous utilisons la fonction uni.navigateTo() pour terminer l'opération de saut de page. Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Définissez un bouton ou un lien lorsque vous cliquez sur le bouton ou le lien, une opération de saut sera effectuée

<button @click="toDetail">跳转到详情页</button>

2. Dans la méthode toDetail, appelez la méthode uni.navigateTo() ; fonction, qui nécessitera que le chemin de la page vers laquelle accéder soit transmis en tant que paramètre ;

toDetail() {
   uni.navigateTo({
        url:'./detail?id=1'
   })
}

3 Dans la page vers laquelle accéder, récupérez les paramètres transmis via this.$route.query.id.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

3. Comment Uniapp obtient les paramètres de page

Il existe deux manières principales d'obtenir les paramètres de page dans Uniapp : la requête et les paramètres. Dans l'exemple précédent, nous avons utilisé une requête pour transmettre et obtenir des paramètres.

1. Paramètre de requête

Le paramètre de requête est un paramètre dans l'URL Après avoir terminé le saut via la fonction uni.navigateTo(), le paramètre sera ajouté à la fin de l'URL de la page cible, par exemple. : ./détail?id=1. Dans la page cible, les paramètres transmis peuvent être obtenus via this.$route.query.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

2. paramètres params

Les paramètres params sont des paramètres transmis via l'objet de routage. Ils sont transmis via le deuxième paramètre de la fonction uni.navigateTo() lors du passage à la page. Dans la page cible, les paramètres transmis peuvent être obtenus via this.$route.params.

toDetail() {
   uni.navigateTo({
        url:'./detail',
        params: {
            id: 1
        }
   })
}

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.params.id;
      }
   }
</script>

Résumé

Grâce à l'introduction de cet article, nous comprenons la manière de base dont uniapp effectue les sauts de page et comment obtenir les paramètres de page. Dans les projets réels, il est nécessaire de choisir la méthode appropriée pour transférer et obtenir les paramètres en fonction des besoins spécifiques de l'entreprise. En apprenant et en maîtrisant ces connaissances de base, nous pouvons mieux développer uniapp, améliorer l'efficacité du développement et offrir aux utilisateurs une meilleure expérience d'application.

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!