Apakah pengawal navigasi Vue?

Pengawal navigasi termasuk: 1. Pengawal pra-jaga global "beforeEach"; 2. Pengawal penghuraian global "beforeResolve"; 3. Pengawal eksklusif laluan "beforeEnter"; sebelumRouteLeave".

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kawal navigasi yang disediakan oleh vue-router digunakan terutamanya untuk menjaga navigasi dengan melompat atau membatalkan. Terdapat berbilang peluang untuk membina proses navigasi laluan: secara global, eksklusif untuk satu laluan, atau pada peringkat komponen.

Ingat bahawa perubahan pada parameter atau pertanyaan tidak akan mencetuskan pengawal navigasi masuk/keluar. Anda boleh bertindak balas kepada perubahan ini dengan memerhati objek $route, atau menggunakan pengawal dalam komponen beforeRouteUpdate.

Pra-pengawal global

Anda boleh menggunakan router.beforeEach untuk mendaftarkan pra-pengawal global:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

Apabila navigasi dicetuskan , Pengawal hadapan global dipanggil mengikut susunan ia dicipta. Pengawal dihuraikan dan dilaksanakan secara tidak segerak Pada masa ini, navigasi sedang menunggu sehingga semua pengawal diselesaikan.

Setiap kaedah pengawal menerima tiga parameter:

• ke: Laluan: objek laluan sasaran yang akan dimasukkan

• daripada: Laluan: Laluan yang akan ditinggalkan oleh navigasi semasa

• seterusnya: Fungsi: Kaedah ini mesti dipanggil untuk menyelesaikan cangkuk ini. Kesan pelaksanaan bergantung pada parameter panggilan kaedah seterusnya.

  • next(): Teruskan ke cangkuk seterusnya dalam saluran paip. Jika semua cangkuk dilaksanakan, status navigasi disahkan.

  • seterusnya(salah): Mengganggu navigasi semasa. Jika URL penyemak imbas berubah (mungkin secara manual oleh pengguna atau dengan butang belakang penyemak imbas), alamat URL akan ditetapkan semula ke alamat yang sepadan dengan laluan dari.

  • next('/') or next({ path: '/' }): Lompat ke alamat lain. Navigasi semasa terganggu dan navigasi baharu dimulakan. Anda boleh menghantar objek lokasi sewenang-wenangnya ke seterusnya, dan pilihan seperti ganti: benar, nama: 'rumah' dan sebarang pilihan yang digunakan dalam pautan penghala ke prop atau router.push dibenarkan untuk ditetapkan.

  • next(error): (2.4.0) Jika parameter yang dihantar ke next ialah contoh Ralat, navigasi akan ditamatkan dan ralat akan dihantar ke router.onError() Panggilan balik berdaftar.

Pastikan fungsi seterusnya dipanggil tepat sekali dalam mana-mana pengawal navigasi tertentu. Ia boleh muncul lebih daripada sekali, tetapi hanya jika semua laluan logik tidak bertindih, jika tidak, cangkuk tidak akan dihuraikan atau ralat akan dilaporkan. Berikut ialah contoh mengubah hala ke /login jika pengguna gagal mengesahkan:

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Pengawal penghuraian global

Baharu dalam 2.5.0

Dalam 2.5.0 anda boleh menggunakan router.beforeResolve untuk mendaftarkan pengawal global. Ini serupa dengan router.beforeEach, kecuali pengawal penghuraian dipanggil sebelum navigasi disahkan dan selepas semua pengawal dalam komponen dan komponen penghalaan async telah dihuraikan.

Pengawal eksklusif laluan

Anda boleh menentukan sebelumMasukkan pengawal terus pada konfigurasi laluan:

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

Pengawal ini adalah sama dengan pengawal global beforeEnter guards Parameter kaedah adalah sama.

Pengawal dalam komponen

Akhir sekali, anda boleh mentakrifkan pengawal navigasi laluan berikut terus dalam komponen penghalaan:

• beforeRouteEnter

• beforeRouteUpdate (baharu dalam 2.2)

• sebelumRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

before boleh diakses ini, kerana pengawal dipanggil sebelum navigasi disahkan, jadi komponen baharu yang akan muncul belum dibuat lagi.

Walau bagaimanapun, anda boleh mengakses contoh komponen dengan menghantar panggilan balik ke seterusnya. Laksanakan panggilan balik apabila navigasi disahkan, dan lulus contoh komponen sebagai parameter kaedah panggil balik.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

Perhatikan bahawa beforeRouteEnter ialah satu-satunya pengawal yang menyokong menghantar panggilan balik ke seterusnya. Untuk beforeRouteUpdate dan beforeRouteLeave, ini sudah tersedia, jadi menghantar panggilan balik tidak disokong kerana ia tidak perlu.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

Leave guard ini biasanya digunakan untuk mengelakkan pengguna keluar secara tiba-tiba sebelum menyimpan perubahan. Navigasi ini boleh dibatalkan dengan next(false).

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

Selesaikan proses penghuraian navigasi

• Navigasi dicetuskan.

• Panggil pengawal beforeRouteLeave dalam komponen yang dinyahaktifkan.

• Panggil global sebelumSetiap pengawal.

• Panggil pengawal beforeRouteUpdate (2.2) dalam komponen yang digunakan semula.

• Panggil sebelumEnter dalam konfigurasi penghalaan.

• Selesaikan komponen penghalaan tak segerak.

• Panggil beforeRouteEnter dalam komponen yang diaktifkan.

• Panggil pengawal global beforeResolve (2.5).

• Navigasi disahkan.

• Panggil cangkuk afterEach global.

• Cetuskan kemas kini DOM.

• Panggil fungsi panggil balik yang dihantar ke seterusnya dalam pengawal beforeRouteEnter, dan contoh komponen yang dibuat akan dihantar sebagai parameter fungsi panggil balik.

[Cadangan berkaitan: "tutorial vue.js"]

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