Bagaimana saya mengendalikan penghalaan dan navigasi di uni-app?

Mengendalikan penghalaan dan navigasi di uni-app

UNI-APP menggunakan sistem penghalaan yang agak mudah berdasarkan API navigasi sendiri. Daripada bergantung kepada penghalaan berasaskan pelayar tradisional seperti Router React atau Vue Router, UNI-APP menguruskan navigasi secara dalaman. Ini bermakna anda terutamanya berinteraksi dengan navigasi menggunakan kaedah yang disediakan oleh rangka kerja. Kaedah teras ialah uni.navigateTo() , yang menolak halaman baru ke timbunan navigasi. Kaedah lain termasuk uni.redirectTo() , yang menggantikan halaman semasa, uni.reLaunch() , yang menutup semua halaman dan membuka yang baru, dan uni.navigateBack() , yang muncul halaman dari timbunan. Kaedah ini tidak segerak dan mengembalikan janji, membolehkan anda mengendalikan kejayaan atau kegagalan. Halaman -halaman itu sendiri ditakrifkan dalam fail pages.json anda, menyenaraikan laluan ke setiap komponen Vue yang mewakili halaman. Sebagai contoh, untuk menavigasi ke halaman bernama 'Detail' yang terletak di pages/detail/detail.vue , anda akan menggunakan uni.navigateTo({ url: '/pages/detail/detail' }) . URL adalah relatif kepada direktori pages . Selain itu, UNI-APP menyokong navigasi bar tab, yang membolehkan anda membuat aplikasi dengan tab navigasi bawah pelbagai, masing-masing menuju ke set halaman yang berbeza. Ini dikonfigurasikan dalam pages.json juga, menentukan halaman mana yang dimiliki oleh tab.

Amalan terbaik untuk melaksanakan navigasi dalam projek uni-apl

Beberapa amalan terbaik meningkatkan kebolehkerjaan dan pengalaman pengguna navigasi uni-apl anda:

• Struktur URL yang konsisten: Mengekalkan struktur URL yang konsisten dan boleh diramal untuk halaman anda. Ini meningkatkan kebolehbacaan kod dan membuat debugging lebih mudah. Pertimbangkan menggunakan konvensyen penamaan yang jelas untuk halaman anda dan laluan yang sepadan.
• Penggunaan uni.navigateTo() untuk kebanyakan kes: manakala kaedah navigasi lain wujud, mengutamakan uni.navigateTo() untuk kebanyakan senario. Ini mengekalkan sejarah navigasi, yang membolehkan pengguna mudah kembali. Rizab uni.redirectTo() dan uni.reLaunch() untuk situasi tertentu di mana anda ingin menggantikan halaman semasa atau membersihkan timbunan navigasi.
• Data yang dilalui melalui parameter URL atau uni.setStorageSync() : Untuk pemindahan data mudah, gunakan parameter URL. Walau bagaimanapun, untuk data yang lebih besar atau sensitif, leverage uni.setStorageSync() untuk menyimpan data secara berterusan di halaman. Elakkan melewati sejumlah besar data secara langsung melalui parameter URL, kerana ia boleh memberi kesan kepada prestasi dan panjang URL.
• Pengendalian ralat: Sentiasa sertakan pengendalian ralat dalam panggilan navigasi anda menggunakan .then() dan .catch() untuk mengendalikan kegagalan navigasi yang berpotensi dengan anggun. Ini menjadikan aplikasi anda lebih mantap.
• Navigasi Modular: Daripada secara langsung memanggil kaedah navigasi dalam komponen anda, pertimbangkan untuk membuat fungsi atau perkhidmatan navigasi yang boleh diguna semula. Ini memusatkan logik navigasi anda, mempromosikan kebolehgunaan semula kod dan penyelenggaraan.
• Penggunaan bar bar yang sesuai: Jika aplikasi anda sesuai dengan struktur bar tab, gunakannya dengan berkesan. Pastikan setiap tab menyediakan satu set fungsi yang jelas dan berbeza untuk meningkatkan pengalaman pengguna dan kejelasan navigasi.

Melewati data antara halaman menggunakan sistem navigasi Uni-App

UNI-APP menawarkan beberapa cara untuk lulus data antara halaman semasa navigasi:

• Parameter URL: Kaedah yang paling mudah adalah untuk menambah data sebagai parameter pertanyaan kepada URL menggunakan uni.navigateTo({ url: '/pages/detail/detail?id=123&name=John' }) . Anda kemudian boleh mengakses parameter ini dalam halaman sasaran menggunakan uni.getCurrentPages()[uni.getCurrentPages().length - 1].options .
• uni.navigateTo() Dengan pilihan data : Untuk data yang lebih kompleks, anda boleh lulus objek melalui pilihan data dalam uni.navigateTo() . Data ini boleh diakses dalam cangkuk kitaran hayat onLoad halaman sasaran. Sebagai contoh: uni.navigateTo({ url: '/pages/detail/detail', data: { user: { id: 123, name: 'John' } } }) . Akses data dalam halaman terperinci menggunakan this.$page.data .
• uni.setStorageSync() : Untuk data berterusan yang perlu diakses di beberapa halaman atau bahkan selepas navigasi, gunakan uni.setStorageSync() untuk menyimpan data dalam storan tempatan aplikasi. Dapatkannya menggunakan uni.getStorageSync() . Kaedah ini sesuai untuk dataset atau data yang lebih besar yang perlu berterusan melampaui satu contoh navigasi. Ingatlah untuk membersihkan storan apabila data tidak lagi diperlukan.
• Bas Acara (untuk senario kompleks): Untuk komunikasi antara halaman yang lebih kompleks, terutamanya apabila berurusan dengan kemas kini tak segerak, pertimbangkan untuk menggunakan sistem bas acara. Ini membolehkan komunikasi yang lebih fleksibel dan dipadamkan di antara halaman. UNI-APP tidak menyediakan bas acara terbina dalam, tetapi anda boleh melaksanakan satu menggunakan sistem acara Vue.

Perangkap biasa untuk dielakkan ketika bekerja dengan penghalaan uni app

• Laluan URL yang tidak betul: Periksa dua laluan di pages.json anda.json dan pastikan mereka dengan tepat mencerminkan struktur fail halaman anda. Typos atau ketidakkonsistenan boleh menyebabkan kesilapan navigasi.
• Lebih banyak uni.reLaunch() : Walaupun berguna untuk senario tertentu, overusing uni.reLaunch() boleh memberi kesan negatif kepada pengalaman pengguna dengan mengganggu sejarah navigasi dan menjadikannya sukar untuk menavigasi kembali.
• Mengabaikan pengendalian ralat: Mengabaikan pengendalian kesilapan dalam kaedah navigasi anda boleh membawa kepada tingkah laku atau kemalangan aplikasi yang tidak dijangka. Sentiasa mengendalikan kesilapan yang berpotensi menggunakan .then() dan .catch() .
• Melewati data besar melalui parameter URL: Elakkan lulus sejumlah besar data melalui parameter URL. Ini boleh memberi kesan yang ketara dan berpotensi melebihi had panjang URL. Gunakan kaedah alternatif seperti pilihan data uni.navigateTo() atau uni.setStorageSync() .
• Tidak Membersihkan Penyimpanan: Apabila menggunakan uni.setStorageSync() , ingatlah untuk membersihkan storan apabila data tidak lagi diperlukan. Meninggalkan data yang tidak perlu dalam penyimpanan boleh mengambil ruang yang tidak perlu dan berpotensi membawa kepada tingkah laku yang tidak dijangka.
• Corak navigasi yang tidak konsisten: Mengekalkan corak navigasi yang konsisten sepanjang aplikasi anda. Penggunaan kaedah navigasi yang tidak konsisten boleh mengelirukan pengguna dan membuat aplikasi berasa terputus.

Atas ialah kandungan terperinci Bagaimana saya mengendalikan penghalaan dan navigasi di uni-app?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!