Rumah > hujung hadapan web > View.js > teks badan

Cara menggunakan pengawal navigasi dalam Vue3

PHPz
Lepaskan: 2023-05-16 18:58:28
ke hadapan
2194 orang telah melayarinya

    Apakah itu pengawal navigasi?

    Seperti namanya, pengawal navigasi yang disediakan oleh vue-router digunakan terutamanya untuk menjaga navigasi dengan melompat atau membatalkan. Terdapat banyak cara untuk membina navigasi laluan ke dalamnya: secara global, eksklusif untuk satu laluan atau pada peringkat komponen.

    Semak situasi berikut:

    Secara lalai, mengklik pautan halaman utama boleh terus memasuki antara muka yang ditentukan, tetapi antara muka ini memerlukan pengguna log masuk sebelum mengakses, yang merupakan masalah

    Cara menggunakan pengawal navigasi dalam Vue3

    Pengawal navigasi boleh disediakan untuk mengesan sama ada pengguna log masuk. Jika log masuk, pengguna akan memasuki halaman latar belakang Jika tidak log masuk, pengguna akan terpaksa memasuki halaman log masuk, seperti yang ditunjukkan dalam rajah

    Cara menggunakan pengawal navigasi dalam Vue3

    2.

    1. Pengawal global (3)

    Pengawal hadapan global

    Setiap kali lompatan navigasi laluan berlaku, pengawal hadapan global akan dicetuskan pengawal hadapan global, pengaturcara boleh mengawal hak akses setiap laluan

    1 Cara menggunakan

    Anda boleh Gunakan router.beforeEach((to, from, next) => {}) dalam halaman 🎜>router/index.js

    untuk mendaftarkan pengawal hadapan global.

    2. Kod:

    // router/index.js 页面
    
    router.beforeEach((to, from, next) => {
        console.log(to, from);
        next()
    });
    Salin selepas log masuk
    Pengawal resolusi global

    1. Anda boleh menggunakan router.beforeResolve untuk mendaftarkan pengawal global. Ini serupa dengan router.beforeEach kerana ia menyala pada setiap navigasi, tetapi memastikan bahawa pengawal penghuraian dipanggil dengan betul sebelum navigasi diakui, dan selepas semua pengawal dalam komponen dan komponen laluan tak segerak dihuraikan.

    2. Kod:

    // router/index.js 页面
    
    router.beforeResolve((to, from, next) => {
        console.log(to,from);
        next()
    })
    Salin selepas log masuk
    Global post-hook
    1 Penggunaan
    Anda juga boleh mendaftarkan post-hook global Tidak seperti pengawal, cangkuk ini tidak akan menerima fungsi seterusnya mahupun menukar navigasi itu sendiri:

    2 Kod:

    // router/index.js 页面
    
    router.afterEach((to, from) => {
        console.log(to,from);
    })
    Salin selepas log masuk

    Ia berguna untuk fungsi tambahan seperti analisis, menukar tajuk halaman dan pengisytiharan. halaman berguna untuk banyak perkara lain.

    2. Pengawal eksklusif laluan (1)

    1 Penggunaan

    Anda boleh menentukan sebelumMasuk terus dalam konfigurasi penghalaan Pengawal:

    2. Kod:

    // router/index.js 页面(路由规则中)
    
    const routes = [
    	{
    	    path: '/home',
    	    name: 'Home',
    	    component: HomeView,
    	    beforeEnter: (to, from,next) => {
    	        console.log(to, from);
    	        next()
    	    },
    	}, 
    ]
    Salin selepas log masuk

    3 Pengawal dalam komponen (3 keping)

    komponen Terdapat tiga pengawal dalaman: sebelumRouteEnter sebelum laluan masuk, sebelumRouteLeave apabila laluan keluar, dan beforeRouteUpdate apabila halaman dikemas kini

    sebelumRouteEnter(ke, dari, seterusnya)

    1. Cara menggunakan
    dalam komponen Digunakan dalam templat, ditulis pada tahap yang sama seperti kaedah: {}, pengawal laluan komponen ialah pengawal laluan yang ditulis dalam setiap fail vue yang berasingan

    2 Kod:

    // vue 组件内使用
    
    onBeforeRouteUpdate((to, from) => {
      //当前组件路由改变后,进行触发
      console.log(to);
    });
    Salin selepas log masuk
    Salin selepas log masuk
    Nota: dalam vue3 Pengawal laluan beforeRouterEnter tidak boleh digunakan dalam fungsi persediaan

    sebelumRouteUpdate(ke, dari, seterusnya)

    1 Kaedah penggunaan
    digunakan dalam templat komponen, dengan kaedah: {. } ditulis pada tahap yang sama Pengawal laluan komponen ialah pengawal laluan yang ditulis dalam setiap fail vue berasingan

    2.

    1. Kaedah penggunaan digunakan dalam templat komponen, yang ditulis pada tahap yang sama dengan kaedah: {}. Pengawal laluan komponen ialah pengawal laluan yang ditulis dalam setiap fail vue yang berasingan

    2. Kod:
    // vue 组件内使用
    
    onBeforeRouteUpdate((to, from) => {
      //当前组件路由改变后,进行触发
      console.log(to);
    });
    Salin selepas log masuk
    Salin selepas log masuk
    3. Tiga parameter pengawal navigasi

    ke: objek maklumat penghalaan yang akan dilawati
    • daripada: yang akan meninggalkan objek maklumat Penghalaan
    • seterusnya: fungsi
    • memanggil next() untuk menunjukkan pelepasan, membenarkan navigasi penghalaan ini

      memanggil seterusnya(palsu) untuk menunjukkan tidak melepaskan , navigasi penghalaan ini tidak dibenarkan

      Panggil seterusnya({routerPath}) untuk menavigasi ke alamat ini Secara umumnya, apabila pengguna tidak log masuk, dia akan menavigasi ke antara muka log masuk

      Petua: Fungsi ini boleh muncul beberapa kali dalam pengawal navigasi, tetapi hanya boleh dipanggil sekali!!!

    4. Cara menggunakan beforeRouteEnterCara menggunakan pengawal navigasi dalam Vue3<🎜 dalam vue3 >

    Jika anda menggunakan gabungan API dan fungsi persediaan untuk menulis komponen, anda boleh menambah kemas kini dan meninggalkan pengawal melalui onBeforeRouteUpdate dan onBeforeRouteLeave masing-masing. Sila rujuk bahagian API Komposisi untuk butiran lanjut.

    Untuk butiran, sila lihat dokumentasi rasmi vue-router

    Navigation Guard | Vue Router

    Kaedah 1. Semasa menyediakan penghalaan, kami boleh menggunakan kaedah beforeEnter memintas, iaitu, dalam router.js:

    // vue 组件内使用
    
    onBeforeRouteLeave((to, from) => {
      //离开当前的组件,触发
      alert("我离开啦");
    });
    Salin selepas log masuk

    Kaedah 2. Kita juga boleh menggunakan kaedah penulisan vue2 dan menggunakan API pilihan untuk menggunakan cangkuk beforeRouterEnter
    {
    	path: &#39;/&#39;,
    	name: &#39;home
    	component: () => import(&#39;@/xxx.vue&#39;),
    	beforeEnter: (to, from) => {
    		// 可以在定义路由的时候监听from和to
    	}
    }
    Salin selepas log masuk

    Lima. Simulasi kes pendaftaran log masuk

    <script>
    export default {
    	beforeRouteEnter(to, from) {
    		console.log(&#39;before router enter&#39;, to, from)
    	},
    	mounted() {
    		console.log(&#39;mounted&#39;)
    	},
    }
    Salin selepas log masuk

    Atas ialah kandungan terperinci Cara menggunakan pengawal navigasi dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Label berkaitan:
    sumber:yisu.com
    sintaks gula dalam Vue3"> Artikel sebelumnya:Cara menggunakan
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan