Pengenalan kepada fungsi pengawal laluan dalam dokumentasi Vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri berkuasa, salah satunya ialah fungsi pengawal laluan. Fungsi pengawal laluan ialah ciri penting penghalaan Vue dan digunakan untuk melaksanakan logik kawalan apabila menavigasi ke atau meninggalkan laluan. Fungsi pengawal laluan membolehkan anda mengawal bacaan dan pengubahsuaian laluan, serta navigasi laluan berdasarkan pelbagai keadaan. Artikel ini akan memperkenalkan fungsi pengawal laluan dalam dokumen Vue untuk membantu anda memahami peranan dan penggunaan fungsi pengawal laluan dalam Vue.

Fungsi pengawal laluan boleh dibahagikan kepada tiga kategori: pengawal hadapan global, cangkuk tiang global dan pengawal eksklusif laluan. Di bawah ini kami memperkenalkan ketiga-tiga jenis pengawal ini masing-masing.

Pra-pengawal global:

Pra-pengawal global boleh dilaksanakan sebelum sebarang lompatan laluan. Anda boleh mendaftarkan pengawal awalan global pada objek penghala Vue supaya ia berkuat kuasa pada setiap laluan dalam keseluruhan projek. Daftar global beforeEach guard pada objek Vue Router menggunakan kaedah beforeEach seperti berikut:

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 下一步执行钩子函数，如果全部执行完了，则返回空或一个true值
})

Penggunaan paling mudah adalah untuk memulakan operasi keluar dengan memanggil kaedah next(). Jika anda ingin membatalkan navigasi (contohnya, pengguna tidak mempunyai kebenaran untuk mengakses), kembalikan palsu atau rentetan atau tika Ralat, yang akan menamatkan navigasi dan beralih terus ke laluan yang sepadan. Contohnya, pengawal berikut menamatkan navigasi jika pengguna tidak log masuk:

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuth
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

Posthook global:

posthook global akan dilaksanakan selepas navigasi disahkan. Pengawal ini tidak menerima fungsi seterusnya dan tidak mengubah navigasi itu sendiri:

router.afterEach((to, from) => {
  // to: 要进入的目标路由
  // from: 正在离开的路由
})

Pengawal eksklusif laluan:

Pengawal eksklusif laluan boleh ditetapkan dalam konfigurasi laluan, yang bermaksud anda boleh Tentukan pelindung depan dan belakang yang berbeza untuk mengendalikan laluan yang berbeza. Anda boleh menggunakan pengawal beforeEnter untuk mengkonfigurasi fungsi pengawal eksklusif untuk laluan tertentu (tidak seperti pengawal global, tidak perlu mendaftarkan pengawal pada objek Penghala). Pengawal beforeEnter hanya akan menyala jika ia wujud dalam konfigurasi eksklusif laluan.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Logik yang dilakukan dalam pengawal eksklusif laluan sangat serupa dengan logik dalam fungsi pra-pengawal global, tetapi pra-pengawal membenarkan anda melakukan logik yang sama untuk semua laluan, manakala laluan- pengawal eksklusif boleh Sesetengah laluan menentukan logik tertentu.

Ringkasan:

Fungsi pengawal laluan ialah bahagian penting dalam penghalaan Vue, yang memberikan anda keupayaan untuk mengawal navigasi laluan. Pengadang hadapan global, cangkuk tiang global dan pengawal eksklusif laluan ialah tiga jenis pengawal yang berbeza, setiap satu dengan tujuan dan ciri yang berbeza. Apabila menggunakan penghalaan Vue, pemahaman yang lebih mendalam dan penggunaan pelbagai jenis pengawal ini boleh membantu anda memperoleh kawalan yang lebih baik ke atas navigasi laluan dan membangunkan aplikasi bahagian hadapan yang lebih fleksibel.

Atas ialah kandungan terperinci Pengenalan kepada fungsi pengawal laluan dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!