Cara menggunakan pengawal navigasi laluan untuk mengawal lompatan laluan dalam Vue

Dalam Vue, penghalaan adalah bahagian yang sangat penting, yang mengawal lompatan dan navigasi antara halaman. Dalam pembangunan sebenar, kita selalunya perlu mengawal laluan tertentu, contohnya, akses hanya boleh dilakukan apabila log masuk atau hak pentadbir diperlukan untuk akses, dsb. Pada masa ini, anda perlu menggunakan pengawal navigasi penghalaan untuk melaksanakan kawalan penghalaan.

Pengawal navigasi laluan boleh memintas lompatan laluan dan melakukan beberapa operasi sebelum atau selepas lompatan laluan. Dalam Vue, pengawal navigasi penghalaan biasanya dilaksanakan menggunakan pengawal navigasi global dan pengawal navigasi dalam komponen. Di bawah ini kami akan memperkenalkan cara menggunakan kedua-dua kaedah ini masing-masing.

1. Pengawal navigasi global

Pengawal navigasi global boleh mengawal penghalaan global dan biasanya didaftarkan dalam contoh Vue. Pengawal navigasi global mengandungi tiga fungsi cangkuk:

1. beforeEach(ke, dari, seterusnya)

Fungsi ini dilaksanakan sebelum laluan melompat dan ia menerima tiga parameter:

• kepada: objek penghalaan yang akan melompat
• dari: objek penghalaan yang sedang melompat
• seterusnya: fungsi panggil balik, yang boleh digunakan untuk lompatan laluan kawalan

Dalam fungsi sebelumSetiap, kita boleh menilai laluan Jika syarat dipenuhi, jika tidak, gunakan kaedah seterusnya untuk memintas atau mengubah hala. Contohnya, tentukan sama ada untuk log masuk:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. afterEach(to, from)

Fungsi ini dilaksanakan selepas laluan melompat >

kepada: objek penghalaan yang baru sahaja melompat ke
dari: objek penghalaan yang baru sahaja meninggalkan

Dalam fungsi afterEach, kita boleh memproses laluan, seperti rekod capaian Rekod dsb.

router.afterEach((to, from) => {
  // 记录访问记录
})

selesai(ke, dari, seterusnya)

Fungsi ini boleh mentakrifkan fungsi cangkuk dalam konfigurasi penghalaan untuk mengendalikan lompatan penghalaan tak segerak.

Contohnya:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

Apabila menggunakan pengawal navigasi global, perlu diambil perhatian bahawa jika berbilang pengawal dilaksanakan, kaedah seterusnya perlu digunakan untuk mengawal susunan pelaksanaan.

2. Pengawal navigasi dalam komponen

Kawal navigasi dalam komponen menggunakan dua fungsi, beforeRouteEnter dan beforeRouteLeave, untuk melaksanakan kawalan penghalaan.

sebelumRouteEnter(kepada, dari, seterusnya)

Fungsi ini dilaksanakan sebelum komponen dibuat instantiated:

kepada: objek penghalaan yang akan melompat
dari: objek penghalaan yang sedang melompat
seterusnya: fungsi panggil balik, digunakan untuk mengawal lompatan penghalaan

dalam fungsi beforeRouteEnter, memandangkan komponen belum dibuat instantiated, objek ini tidak boleh diakses secara langsung, jadi kaedah seterusnya perlu digunakan untuk menghantar fungsi panggil balik, yang dilaksanakan selepas komponen di instantiated.

Sebagai contoh, kita boleh menggunakan fungsi ini untuk mencipta laluan dinamik:

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

sebelumRouteLeave(ke, dari, seterusnya)

Fungsi ini berada dalam Dilaksanakan sebelum komponen keluar, ia menerima tiga parameter:

kepada: objek penghalaan yang akan melompat
dari: objek penghalaan yang sedang melompat
seterusnya : Fungsi panggil balik, digunakan untuk mengawal lompatan laluan

Dalam fungsi beforeRouteLeave, kami boleh memproses komponen semasa, seperti menyimpan data atau menggesa pengguna, dsb.

Sebagai contoh, kami boleh menggesa pengguna sama ada untuk menyimpan data sebelum meninggalkan halaman:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

Apabila menggunakan pengawal navigasi dalam komponen, perlu diperhatikan bahawa jika berbilang pengawal dilaksanakan, kaedah seterusnya perlu digunakan untuk mengawal susunan pelaksanaan.

Ringkasnya, pengawal navigasi penghalaan adalah bahagian yang sangat penting dalam Vue, yang boleh membantu kami mengawal penghalaan secara fleksibel. Dalam pembangunan sebenar, kita perlu memilih cara yang sesuai untuk menggunakan pengawal navigasi penghalaan berdasarkan keperluan perniagaan, untuk mencapai kawalan penghalaan yang lebih baik dan meningkatkan pengalaman pengguna.

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