Apakah cangkuk navigasi vue?

Terdapat tiga jenis cangkuk navigasi dalam Vue: 1. Cangkuk pelindung global, yang merujuk kepada fungsi cangkuk yang beroperasi secara langsung pada contoh penghalaan Cirinya ialah semua komponen konfigurasi penghalaan akan dicetuskan. 2. Cangkuk pengawal eksklusif laluan merujuk kepada fungsi cangkuk yang juga boleh ditetapkan apabila mengkonfigurasi satu laluan, dan hanya boleh berfungsi di bawah laluan ini. 3. Cangkuk pengawal tempatan merujuk kepada fungsi cangkuk yang dilaksanakan dalam komponen, serupa dengan fungsi kitaran hayat dalam tatasusunan, yang bersamaan dengan fungsi cangkuk kitaran hayat yang ditambahkan untuk komponen yang dikonfigurasikan dengan penghalaan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Peranan cangkuk navigasi

• Cangkuk navigasi yang disediakan oleh vue-router digunakan terutamanya untuk navigasi memintas. Biarkan ia melengkapkan lompatan atau batal.

Klasifikasi cangkuk navigasi

• Pengawal global
• Lalu bebas Nikmati pengawal
• Pengawal tempatan

1. Pengawal global

merujuk kepada cangkuk yang beroperasi terus pada bahagian. contoh penghalaan Fungsi, cirinya ialah semua komponen konfigurasi penghalaan akan dicetuskan. Ringkasnya, mencetuskan penghalaan akan mencetuskan fungsi cangkuk ini. Urutan pelaksanaan fungsi cangkuk termasuk beforeEach, beforeResolve, dan afterEach.

<strong>[beforeEach]</strong>[beforeEach]

: Dicetuskan sebelum laluan melompat Parameter termasuk ke, dari, dan seterusnya cangkuk adalah Ia digunakan untuk pengesahan log masuk, iaitu, ia dimaklumkan terlebih dahulu sebelum laluan melompat, untuk mengelakkan pemberitahuan selepas ia melompat dan sudah terlambat.

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

• kepada: mewakili sasaran untuk dimasuki, iaitu objek penghalaan
• daripada: mewakili laluan yang sedang beredar, yang juga merupakan objek penghalaan
seterusnya: Ini ialah kaedah yang mesti dipanggil dan kesan pelaksanaan khusus bergantung pada parameter yang dipanggil kaedah seterusnya

<strong>[beforeResolve]</strong>

[beforeResolve]

: Cangkuk ini serupa dengan beforeEach Ia juga dicetuskan sebelum laluan melompat Ia juga mempunyai tiga parameter: ke, dari, dan seterusnya Penjelasan rasmi tentang perbezaan dari sebelumSetiap adalah:

Perbezaannya adalah dalam navigasi Pengawal penghuraian akan dipanggil sebelum diakui, pada masa yang sama dalam semua komponen pengawal dan selepas komponen penghalaan tak segerak dihuraikan.

Iaitu, ia dipanggil selepas beforeEach dan beforeRouteEnter dalam komponen, selepas afterEach, dan sebelum afterEach. <strong>[afterEach]</strong>

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

[afterEach]

: Bertentangan dengan beforeEach, ia dicetuskan selepas lompatan laluan selesai Parameter termasuk ke dan dari, tiada Seterusnya, ia berlaku selepas beforeEach dan beforeResolve, dan sebelum beforeRouteEnter (footprint inside guard).

2 Pengawal eksklusif laluan

merujuk kepada fungsi cangkuk yang juga boleh ditetapkan apabila mengkonfigurasi satu laluan, dan hanya boleh dimulakan di bawah laluan ini kesan. Lokasinya adalah seperti berikut, iaitu komponen seperti Fail mempunyai fungsi cangkuk sedemikian. Pada masa ini ia hanya mempunyai satu fungsi cangkuk beforeEnter. [beforeEnter]

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

: Ia betul-betul sama seperti sebelumSetiap Jika kedua-duanya ditetapkan, ia akan dilaksanakan sejurus selepas sebelumSetiap. dan seterusnya.

3. Pengawal tempatan

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

merujuk kepada fungsi cangkuk yang dilaksanakan dalam komponen, serupa dengan fungsi kitaran hayat dalam tatasusunan . Setara dengan fungsi cangkuk kitaran hayat yang ditambahkan pada komponen yang dikonfigurasikan dengan penghalaan. Fungsi cangkuk termasuk beforeRouteEnter, beforeRouteUpdate (baru dalam 2.2), dan beforeRouteLeave mengikut urutan pelaksanaan Lokasi pelaksanaan adalah seperti berikut:

Lompat laluan. proses penghuraian navigasi , apabila dihalakan oleh A->B

1. Panggil pengawal cuti dalam komponen A. beforeRouterLeave

dalam komponen A 2. Panggil global beforeEach guard. router.beforeEach

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

3. Kemudian laksanakan sebelumEnter dalam konfigurasi laluan B.

4. Kemudian laksanakan pengawal kemasukan komponen B. beforeRouterEnter

5 dalam komponen B. Panggil pengawal beforeResolve global (2.5+). router.beforeResolve

6.

7. Panggil selepas setiap cangkuk global. router.afterEach

8. Pencetus kemas kini DOM. [Cadangan berkaitan: tutorial video vuejs

, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah cangkuk navigasi vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!