Petua untuk menggunakan penghalaan dalam uniapp

Petua untuk menggunakan penghalaan dalam uniapp

1 Gambaran Keseluruhan
Dalam pembangunan uniapp, penghalaan adalah aspek yang sangat penting, ia boleh melompat antara halaman dan lulus parameter. Artikel ini akan memperkenalkan kemahiran penggunaan penghalaan dalam uniapp dan memberikan contoh kod khusus.

2. Penggunaan asas penghalaan uniapp
Dalam uniapp, penggunaan asas penghalaan boleh dilakukan melalui uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab dan API lain untuk melompat ke halaman. Senario penggunaan API ini sedikit berbeza, dan penggunaan khusus bergantung pada keperluan projek.

1. uni.navigateTo: digunakan untuk membuka halaman baharu dan menyimpan halaman semasa. Sesuai untuk lompat halaman biasa.
   Contoh kod:

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

2. uni.redirectTo: digunakan untuk menutup halaman semasa dan membuka halaman baharu. Sesuai untuk lompat halaman yang tidak memerlukan kembali ke halaman sebelumnya.
   Contoh kod:

   uni.redirectTo({
    url: '/pages/home/home'
   });

3. uni.reLaunch: Tutup semua halaman dan buka halaman dalam aplikasi. Ia sesuai untuk senario di mana anda mengimbas kod QR untuk memasuki program mini dari platform lain.
   Contoh kod:

   uni.reLaunch({
    url: '/pages/login/login'
   });

4. uni.switchTab: Lompat ke halaman tarBar dan tutup semua halaman bukan tarBar yang lain. Sesuai untuk melompat antara halaman dalam bar navigasi bawah.
   Contoh kod:

   uni.switchTab({
    url: '/pages/home/home'
   });

3. Pemindahan parameter penghalaan uniapp
Dalam uniapp, data boleh dipindahkan antara halaman melalui parameter URL.

1. Melalui parameter antara halaman
   Apabila halaman A melompat ke halaman B, data boleh dihantar melalui parameter URL. Dalam kod lompat halaman A, parameter dihantar melalui url penyambungan:

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

Dalam halaman B, nilai parameter boleh diperoleh melalui uni.$route.query:

onLoad() {
    console.log(this.$route.query.id);
}

2. Parameter diluluskan apabila halaman returns
   Dalam uniapp, anda boleh kembali ke halaman sebelumnya melalui kaedah uni.navigateBack dan lulus parameter dengan memanggil kaedah onBack halaman sebelumnya. Kod khusus adalah seperti berikut:
   Dalam halaman A, apabila melompat ke halaman B, lulus parameter dan daftar kaedah onBack halaman sebelumnya:

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

Dalam halaman B, dapatkan nilai parameter dan panggilnya apabila halaman kembali Kaedah onBack halaman sebelumnya melepasi parameter:

methods: {
    goBack() {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.getOpenerEventChannel().emit(this.asr_notify);
            }
        });
    }
}

Dalam halaman A, daftarkan kaedah onBack dan terima parameter:

methods: {
    onBack(data) {
        console.log(data);
    }
}

4 pintasan laluan Uniapp dan kawalan kebenaran
Semasa proses pembangunan, kadangkala perlu melakukan beberapa operasi pada halaman tertentu Kawalan kebenaran untuk menghalang pengguna yang tidak log masuk daripada mengakses halaman tertentu.

Dalam uniapp, pemintasan laluan dan kawalan kebenaran boleh dilaksanakan melalui pengawal navigasi. Kod khusus adalah seperti berikut:

1. Buat pemintas penghalaan global dalam fail main.js:

   // 全局路由拦截器
   router.beforeEach((to, from, next) => {
    const token = uni.getStorageSync('token');
    if (to.meta.requiresAuth && !token) { // 判断是否需要登录才能查看页面
        next('/pages/login/login');
    } else {
        next();
    }
   });

2. Konfigurasikan maklumat meta penghalaan pada halaman yang memerlukan kawalan kebenaran:

   export default {
    meta: {
        requiresAuth: true // 需要登录才能访问
    }
    // 省略其他代码...
   }

operasi di atas

anda boleh mencapai Halaman yang memerlukan log masuk untuk mengakses adalah tertakluk kepada kawalan kebenaran Pengguna yang tidak log masuk akan dipintas dan diubah hala ke halaman log masuk.

Ringkasan:
Artikel ini memperkenalkan penggunaan asas penghalaan dalam uniapp, kaedah lulus parameter, pemintasan laluan dan kawalan kebenaran. Melalui penggunaan penghalaan yang munasabah, lompatan dan pemindahan data antara halaman boleh dicapai, meningkatkan pengalaman pengguna aplikasi.

Saya harap artikel ini akan membantu anda menggunakan penghalaan uniapp.

Atas ialah kandungan terperinci Petua untuk menggunakan penghalaan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!