Cara menggunakan 7 jenis pengawal laluan dalam vue3

Apakah jenis pengawal laluan yang ada?

Pengawal laluan (pengawal navigasi) dibahagikan kepada tiga jenis: pengawal global (3), pengawal eksklusif laluan (1), pengawal komponen (3)

Tiga jenis pengawal laluan Parameter

ke: laluan sasaran untuk melompat ke

dari: laluan semasa untuk melompat dari

seterusnya: jangan sekat apa-apa, lalu terus

Nota: Anda mesti memastikan bahawa fungsi seterusnya dipanggil sekali dalam mana-mana pengawal navigasi tertentu. Ia boleh muncul beberapa kali, tetapi hanya apabila semua laluan logik tidak bertindih, jika tidak, ralat akan dilaporkan.

Kes:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

1. Pengawal penghalaan global

Terdapat tiga pengawal penghalaan global: pengawal hadapan global, pengawal pos global dan pengawal penghuraian global

Pengadang hadapan global

1 Kaedah penggunaan: dikonfigurasikan dalam main.js, dicetuskan sebelum lompat laluan ini digunakan terutamanya untuk pengesahan log masuk, iaitu laluan belum lagi Maklumkan lompatan lebih awal untuk mengelakkan pemberitahuan terlalu lewat selepas lompatan

2 Kod:

router.beforeEach((to,from,next)=>{})

3

1. Cara menggunakan: Konfigurasikan dalam main.js Bertentangan dengan beforeEach, ia dicetuskan selepas lompatan laluan selesai Ia berlaku selepas beforeEach dan beforeResolve dan sebelum beforeRouteEnter (jaga dalam komponen). Cangkuk tidak akan menerima fungsi seterusnya mahupun menukar navigasi itu sendiri

2 Kod:

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

Pengawal penghuraian global

Penggunaan: Konfigurasikan dalam main.js, ini Cangkuk adalah serupa dengan beforeEach, dan juga dicetuskan sebelum laluan melompat Perbezaannya ialah ia dipanggil sebelum navigasi disahkan, dan selepas pengawal dan komponen penghalaan tak segerak dalam semua komponen dihuraikan, iaitu, selepas beforeEach dan beforeRouteEnter. dalam komponen, dan sebelum selepasSetiap.

2. Kod:

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

1 Pengawal dalam komponen

Terdapat tiga pengawal dalam komponen: sebelumRouteEnter sebelum laluan masuk, sebelumRouteLeave apabila laluan daun, halaman Apabila mengemas kini beforeRouteUpdate

sebelumRouteEnter(ke, dari, seterusnya)
1 templat, diikuti dengan kaedah: {} ditulis pada tahap yang sama Pengawal laluan komponen ialah pengawal laluan yang ditulis dalam setiap fail vue yang berasingan

2. dari, seterusnya)

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

2. Kod :

router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

sebelumRouteLeave(ke, dari, seterusnya)

• 1. Penggunaan: Digunakan dalam templat komponen, diikuti dengan kaedah: {} Ditulis pada tahap yang sama, pengawal laluan komponen ialah pengawal laluan yang ditulis dalam setiap fail vue yang berasingan

2 Kod:

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

Pengawal eksklusif laluan

Hanya ada. satu laluan pengawal eksklusif: dicetuskan apabila memasuki laluan sebelumMasuk

Laluan pengawal eksklusif sebelumMasuk(ke, dari, seterusnya)

• 1 . Cara menggunakan:

  Gunakan
dalam router.js Pengawal eksklusif laluan adalah pengawal yang dikonfigurasikan secara berasingan untuk laluan pada halaman konfigurasi penghalaan

Kod

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

Proses penghuraian navigasi

1 Cetuskan kemasukan ke laluan lain

2. Panggil pengawal komponen untuk meninggalkan laluan sebelumRouteLeave

3 beforeRouteUpdate

dalam komponen yang digunakan semula 5. Panggil beforeEnter

untuk satu laluan dalam konfigurasi penghalaan 6. Parsing komponen penghalaan tak segerak
7 Panggil beforeRouteEnter
dalam komponen penghalaan yang akan memasuki 8 . Panggil pelindung penguraian sebelumSelesaikan
9 Navigasi disahkan
10 Panggil cangkuk siaran global selepasSetiap kemas kini DOM terpasang
12 sebelumRouteEnter pengawal

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