Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Di Vue, pencegat rute terutama digunakan untuk mencegat dan memproses sebelum bernavigasi ke rute tertentu atau ketika meninggalkan rute tertentu. Mekanisme ini memungkinkan pengembang untuk melakukan logika tertentu sebelum atau sesudah navigasi rute terjadi, seperti verifikasi izin, pemuatan data, lompatan halaman, dll.

Di Vue Router, pencegat rute dapat diimplementasikan dengan cara berikut:

1. Global Sebelum Penjaga:

   • router.beforeEach(to, from, next): Daftarkan pra-penjaga global. Saat navigasi rute dipicu, penjaga akan dipanggil sebelum rute berubah.
   • Tujuan: Cocok untuk verifikasi izin global, kontrol bilah kemajuan pemuatan halaman, dll.

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2. Penjaga Tekad Global:

• router.beforeResolve(to, from, next): Daftarkan penjaga penguraian global, yang dipanggil setelah penjaga depan global dan sebelum navigasi dikonfirmasi.

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. Penjaga Per-Rute:

• Tambahkan langsung ke objek konfigurasi peruteanbeforeEnterBidang untuk menambahkan logika penjaga ke satu rute.

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4. Penjaga Dalam Komponen:

• Digunakan di dalam komponenbeforeRouteEnter, beforeRouteUpdate, DanbeforeRouteLeaveFungsi hook, fungsi ini akan dipanggil saat rute bernavigasi ke komponen saat ini, saat komponen saat ini digunakan kembali, dan saat meninggalkan komponen saat ini.

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

Mekanisme pencegat rute ini dapat membantu pengembang mengontrol proses navigasi aplikasi pada berbagai tingkat dan skenario, dan mengimplementasikan fungsi seperti kontrol izin, pramuat data, dan lompatan halaman, sehingga mengelola dan mengoptimalkan pengalaman interaktif aplikasi front-end dengan lebih baik.