Apakah yang perlu saya lakukan jika laluan lompat dalam komponen uniapp berbeza?

Dengan perkembangan pesat Internet mudah alih, pembangunan aplikasi mudah alih secara beransur-ansur menjadi salah satu bidang keutamaan bagi pembangun. Secara relatifnya, aplikasi hari ini bukan sahaja perlu cantik dan lancar, tetapi juga mempunyai pengalaman pengguna yang lebih baik. Oleh itu, pembangun turut meluangkan lebih banyak masa untuk butiran seperti warna, animasi dan gaya antara muka serta suka menggunakan penghalaan bersarang untuk pengurusan dan panggilan.

Semasa saya menggunakan uniapp untuk membangunkan aplikasi mudah alih baru-baru ini, saya menghadapi masalah dengan laluan lompat yang berbeza dalam komponen, saya berharap dapat berkongsi penyelesaiannya dengan anda di sini.

Perihalan Masalah

Saya menggunakan komponen uni-list dalam uniapp untuk memaparkan berbilang kandungan dalam senarai Apabila mengklik pada kandungan tertentu, saya perlu memasukkan halaman butiran tertentu. Anda boleh melompat melalui navigateTo Logik lompat adalah seperti berikut:

uni.navigateTo({
  url: '/pages/detail/detail?id=' + id
});

di mana halaman detail telah dibuat di bawah folder pages.

Tetapi apabila saya melompat dengan cara ini, saya mendapati bahawa tidak kira halaman senarai mana saya berada, laluan url halaman detail selepas lompatan ialah /pages/detail/detail?id=. Dalam kes ini, apabila menggunakan uni.showModal untuk kembali ke halaman sebelumnya, halaman senarai sebelumnya tidak dapat dikembalikan dengan betul.

Analisis Sebab

Selepas analisis, ini kerana saya menggunakan App.vue dalam folder uni-simple-router untuk pengurusan penghalaan dan perlu menyediakannya. Khususnya, ia ditetapkan dalam config di bawah folder router.js. Di sini, anda juga perlu menggunakan navigateTo untuk melompat, tetapi perlu diperhatikan bahawa kaedah tetapan laluannya berbeza daripada tetapan laluan biasa.

Penyelesaian

Anda boleh menyelesaikan masalah ini melalui dua kaedah berikut:

1 Gunakan terus uni.navigateTo

Kaedah ini dibandingkan dengan Bahasa agak mudah, anda hanya perlu menambah acara list atau bindtap dalam komponen @click:

<uni-list-item
  title="跳转详情页"
  arrow
  @click="redirectToDetail(item.id)">
</uni-list-item>

dan kemudian tambah logik lompat dalam methods:

methods: {
  redirectToDetail(id) {
    uni.navigateTo({
      url: '/pages/detail/detail?id=' + id
    });
  }
}

Dengan cara ini, kaedah redirectToDetail akan dipanggil dalam setiap halaman untuk melompat ke halaman tertentu.

2. Gunakan uni-simple-router

Prasyarat untuk menggunakan kaedah ini ialah kami telah menggunakan App.vue dalam uni-simple-router untuk pengurusan penghalaan dan telah mengkonfigurasinya dalam config routes.

Dalam list komponen methods, anda perlu menambah kaedah berikut:

methods: {
  redirectToDetail(id) {
    uni.$router.push({
      path: '/pages/detail/detail?id=' + id
    });
  }
}

Kaedah $router.push dipanggil di sini dan atribut laluan perlu diisi dalam laluan lengkap, termasuk nama folder fail, nama fail dan parameter. Selepas melompat dengan cara ini, laluan setiap halaman akan berbeza, dan anda boleh kembali ke halaman sebelumnya dengan betul.

---

Ringkasnya, sama ada anda menggunakan uni.navigateTo secara langsung atau uni-simple-router, anda perlu memberi perhatian kepada cara laluan ditetapkan semasa melompat, supaya anda boleh melompat dengan betul ke halaman yang perlu dipaparkan, dan kembali Pergi ke halaman sebelumnya. Analisis dan penyelesaian masalah juga boleh membantu pembangun memahami penggunaan dan konfigurasi penghalaan dengan lebih baik.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika laluan lompat dalam komponen uniapp berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!