Bagaimana untuk menggunakan pengawal navigasi dalam Penghala Vue?

Bagaimana untuk menggunakan pengawal navigasi dalam Penghala Vue?

Kawal navigasi ialah ciri yang sangat penting dan berkuasa dalam Penghala Vue Ia membolehkan kami melaksanakan beberapa logik tersuai sebelum navigasi dicetuskan atau sebelum meninggalkan laluan semasa. Dengan menggunakan pengawal navigasi, kami boleh melaksanakan fungsi seperti pengesahan kebenaran penghalaan, animasi penukaran halaman, dsb.

Vue Router menyediakan tiga jenis pengawal navigasi:

1. Pengadang global: pengawal yang akan dicetuskan oleh semua laluan dalam aplikasi, termasuk beforeEach, beforeResolve dan afterEach.
2. Pengawal laluan: Pengawal yang hanya akan mencetuskan laluan tertentu, termasuk beforeEnter, beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave.
3. Pengawal dalam komponen: Hanya pengawal komponen semasa akan dicetuskan, termasuk beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave.

Mari terangkan cara menggunakan pengawal navigasi ini.

Pertama, kita perlu memperkenalkan Penghala Vue dalam projek Vue dan mencipta contoh penghalaan. Dalam proses mencipta contoh, kami boleh mentakrifkan pengawal global:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [...]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在进入每个路由之前执行的逻辑
  next()
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // 在全部组件被解析之后执行的逻辑
  next()
})

// 全局后置守卫
router.afterEach((to, from) => {
  // 在进入每个路由之后执行的逻辑
})

Dalam kod di atas, kami menentukan tiga pengawal global. beforeEach digunakan untuk melaksanakan logik sebelum memasuki setiap laluan, beforeResolve digunakan untuk melaksanakan logik selepas semua komponen dihuraikan, dan afterEach digunakan untuk melaksanakan logik selepas memasuki setiap laluan. Menggunakan kaedah next(), anda boleh melaksanakan pengawal seterusnya atau melakukan lompatan penghalaan.

Seterusnya, kita boleh menentukan pengawal laluan. Apabila mencipta laluan, kami boleh menentukan pengawal untuk setiap konfigurasi laluan tertentu:

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 在进入指定路由之前执行的逻辑
        next()
      }
    }
  ]
})

Dalam kod di atas, kami mentakrifkan pengawal beforeEnter untuk laluan /about. Sebelum memasuki laluan, fungsi yang kita lalui akan dilaksanakan.

Akhir sekali, kita juga boleh menentukan pengawal di dalam komponen. Di dalam komponen, kita boleh menggunakan tiga jenis pengawal: beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave:

export default {
  ...
  beforeRouteEnter(to, from, next) {
    // 在进入当前组件之前执行的逻辑
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 当前组件复用时，更新路由参数时执行的逻辑
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前组件之前执行的逻辑
    next()
  }
}

Kod di atas menunjukkan penggunaan pengawal di dalam komponen Kita boleh menulis logik kita dalam cangkuk kitaran hayat yang sepadan, dan kemudian gunakan next(. ) Langkah seterusnya.

Ringkasnya, pengawal navigasi dalam Penghala Vue ialah fungsi yang sangat fleksibel dan berkuasa Kami boleh menggunakan pengawal global, pengawal penghalaan dan pengawal dalam komponen untuk melaksanakan pelbagai logik tersuai. Dalam pembangunan harian, kami boleh menggunakan pengawal ini secara fleksibel mengikut keperluan khusus untuk mencapai pengalaman pengguna dan pelaksanaan fungsi yang lebih baik.

Ringkasnya, pengawal navigasi ialah fungsi yang sangat penting dalam Penghala Vue Ia boleh membantu kami melakukan beberapa pemprosesan logik tersuai semasa proses penukaran laluan. Melalui pengawal global, pengawal laluan dan pengawal intra-komponen, kami boleh melaksanakan pelbagai fungsi, seperti pemintasan laluan, pengesahan kebenaran, animasi penukaran laluan, dsb. Dalam pembangunan projek sebenar, penggunaan rasional pengawal navigasi boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna.

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