Bagaimana untuk melompat untuk mendapatkan parameter dalam uniapp

1. Pengenalan kepada uniapp

Uniapp ialah alat untuk membangunkan aplikasi merentas platform Ia menggunakan rangka kerja pembangunan vue.js, WebStorm IDE dan persekitaran pembangunan bersepadu HBuilderX untuk menyokong pembangunan applet WeChat, Alipay. applet, Program Mini Baidu, Program Mini Toutiao, H5, Aplikasi dan aplikasi lain.

2. halaman lompat uniapp

Dalam uniapp, lompatan halaman dilakukan melalui penghalaan. Blok binaan asas penghalaan termasuk laluan dan parameter. Antaranya, laluan digunakan untuk menentukan laluan halaman untuk melompat ke, dan parameter adalah beberapa maklumat tambahan, seperti id, nama, dsb.

Dalam uniapp, kami menggunakan fungsi uni.navigateTo() untuk melengkapkan operasi lompat halaman. Langkah-langkah pelaksanaan khusus adalah seperti berikut:

1 Tentukan butang atau pautan apabila diklik, operasi lompatan akan dilakukan; kaedah toDetail, Panggil fungsi uni.navigateTo() dan lulus dalam laluan halaman untuk dilompat sebagai parameter

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

3. Dalam halaman yang hendak dilompat, dapatkannya melalui ini Parameter .query.id diluluskan.

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

3. Cara uniapp mendapatkan parameter halaman

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

Terdapat dua cara utama untuk mendapatkan parameter halaman dalam uniapp: pertanyaan dan params. Dalam contoh sebelumnya, kami menggunakan pertanyaan untuk lulus dan mendapatkan parameter.

parameter pertanyaan

1. parameter pertanyaan ialah parameter dalam url Selepas lompatan selesai melalui fungsi uni.navigateTo(), parameter akan disambungkan ke url halaman sasaran , seperti: ./detail?id=1. Dalam halaman sasaran, parameter yang diluluskan boleh diperolehi melalui ini.$route.query.

parameter params

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

2. parameter params ialah parameter yang dilalui melalui objek penghalaan dan melalui yang kedua daripada fungsi uni.navigateTo() apabila melompat ke halaman Parameter passing. Dalam halaman sasaran, parameter yang diluluskan boleh diperolehi melalui ini.$route.params.

Ringkasan

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>

Melalui pengenalan artikel ini, kami telah mempelajari tentang cara asas uniapp melakukan lompatan halaman dan cara mendapatkan parameter halaman. Dalam projek sebenar, adalah perlu untuk memilih kaedah yang sesuai untuk memindahkan dan mendapatkan parameter mengikut keperluan perniagaan tertentu. Dengan mempelajari dan menguasai pengetahuan asas ini, kami boleh membangunkan uniapp dengan lebih baik, meningkatkan kecekapan pembangunan dan menyediakan pengalaman aplikasi yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melompat untuk mendapatkan parameter dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!