Bagaimana untuk melompat ke halaman dalam uniapp? Dua cara untuk memperkenalkan

uni-app ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js Kami boleh menggunakannya untuk membangunkan aplikasi berdasarkan H5, program mini, Android/iOS dan platform lain. Antaranya, lompat halaman adalah fungsi yang sangat kritikal Artikel ini akan memperkenalkan dua kaedah lompat halaman biasa dalam aplikasi uni, iaitu lompatan laluan dan komunikasi acara antara halaman.

1. Lompat laluan

Lompatan laluan merujuk kepada lompatan ke halaman yang berbeza dengan menukar URL halaman dalam apl uni. uni-app menyediakan satu set API lompat laluan, termasuk:

1. uni.navigateTo()

Gunakan uni.navigateTo() untuk melompat ke bar navigasi bukan bawah aplikasi halaman, dan ingat untuk menggunakan kaedah uni.navigateBack() pada halaman sasaran untuk kembali ke halaman asal, seperti berikut:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

2. uni.redirectTo()

Gunakan uni.redirectTo() untuk menutup semua halaman halaman semasa, buka halaman bar navigasi bukan bawah aplikasi, seperti berikut:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.redirectTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

3. uni.reLaunch()

Gunakan uni.reLaunch() untuk menutup semua halaman dan membuka halaman bar navigasi bukan bawah aplikasi Halaman bar navigasi bawah, seperti berikut:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.reLaunch({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

4. uni.switchTab()

Gunakan uni.switchTab() untuk melompat ke bahagian bawah halaman bar navigasi aplikasi, seperti berikut:

<template>
  <view>
    <button @click="gotoTab3()">跳转到Tab3</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoTab3() {
      uni.switchTab({
        url: '/pages/tab3/tab3'
      })
    }
  }
}
</script>

2. Komunikasi acara antara halaman

Selain lompatan penghalaan, kami juga boleh mencapai kesan lompatan halaman melalui komunikasi acara antara halaman. Khususnya, kita boleh menghantar parameter ke halaman anak melalui prop dalam halaman induk, dan melaksanakan lompatan dalam halaman anak melalui pendengaran acara.

Sebagai contoh, kami mempunyai halaman induk index.vue, yang mengandungi butang Apabila butang diklik, acara childEvent() akan dicetuskan dan parameter akan dihantar ke halaman anak:

<template>
  <view>
    <button @click="childEvent()">跳转到Child页面</button>
    <child :name="name" @backEvent="backEvent"></child>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: 'Mike'
    }
  },
  methods: {
    childEvent() {
      this.name = 'Jerry'
      this.$refs.child.childEvent()
    },
    backEvent(msg) {
      console.log(msg) // '我已经回来了'
    }
  }
}
</script>

dalam Dalam halaman anak

, kami menggunakan prop untuk menerima parameter yang diluluskan oleh ibu bapa dan mendengar acara backEvent ibu bapa Apabila acara dicetuskan, lakukan operasi lompatan: child.vue

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

<script>
export default {
  props: {
    name: String
  },
  methods: {
    childEvent() {
      this.$emit('backEvent', '我已经回来了')
    }
  }
}
</script>

Artikel ini memperkenalkan uni-app Dua kaedah lompat halaman biasa termasuk lompat laluan dan komunikasi acara antara halaman. Untuk keperluan perniagaan yang berbeza, kami boleh memilih untuk menggunakan kaedah yang berbeza untuk lompatan halaman untuk mencapai pengalaman pembangunan dan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke halaman dalam uniapp? Dua cara untuk memperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!