Beberapa kaedah pemintasan penghalaan vue

Dengan pembangunan berterusan teknologi hadapan, rangka kerja vue semakin digemari oleh pembangun. Apabila membangunkan projek Vue, penghalaan adalah komponen yang sangat penting Melalui penghalaan, penukaran halaman dan penggunaan semula komponen aplikasi satu halaman (SPA) boleh dicapai, yang boleh meningkatkan prestasi projek dan pengalaman pengguna. Untuk memastikan keselamatan dan kebolehpercayaan projek, kami perlu menambah pemintas pada penghalaan untuk menyekat atau mengubah hala permintaan yang menyalahi undang-undang. Artikel ini akan memperkenalkan beberapa kaedah pemintasan penghalaan Vue untuk membantu anda memahami dengan cepat prinsip dan kaedah pelaksanaan pemintasan penghalaan Vue.

1. Pengawal hadapan global

Penghala Vue menyediakan pengawal hadapan global, yang boleh memintas permintaan sebelum menukar penghalaan. Pra-pengawal global boleh digunakan untuk menyemak sama ada pengguna telah log masuk atau untuk menyemak sama ada pengguna mempunyai kebenaran untuk mengakses halaman tersebut. Tambahkan kod berikut pada router/index.js:

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next('/login');
  }
})

Coretan kod ini akan dilaksanakan sebelum setiap suis laluan untuk menentukan sama ada pengguna telah log masuk. Jika tidak, ia akan melompat ke halaman log masuk. Ini adalah kaedah pemintasan laluan global yang sangat biasa, yang boleh memastikan keselamatan pengguna dan kestabilan sistem dengan berkesan.

2. Pengawal eksklusif laluan

Dalam Penghala Vue, anda boleh menetapkan pengawal berasingan untuk setiap laluan ini dipanggil pengawal eksklusif laluan. Pengawal eksklusif laluan boleh digunakan untuk menyemak parameter laluan, memanggil antara muka tak segerak, memproses data, dsb. Tambahkan kod berikut pada router/index.js:

const router = new VueRouter({
  routes: [
    {
      path: '/example/:id',
      component: Example,
      beforeEnter: (to, from, next) => {
        const id = to.params.id;
        if (id > 0 && id < 100) {
          next();
        } else {
          next('/error');
        }
      }
    }
  ]
})

Coretan kod ini akan dilaksanakan sebelum suis laluan /example/:id Ia menyemak sama ada id parameter yang diluluskan memenuhi syarat dan melompat jika ia berlaku tidak. Pergi ke halaman "/error", jika tidak, teruskan dengan penukaran penghalaan. Pengawal eksklusif laluan ialah kaedah pemintasan laluan yang sangat fleksibel yang membolehkan kami mengawal penukaran laluan dengan lebih fleksibel.

3. Cakuk pos global

Serupa dengan pengawal hadapan global, Vue Router juga menyediakan cangkuk pos global, yang boleh memintas tindak balas selepas penukaran penghalaan. Cangkuk siaran global boleh digunakan untuk mengendalikan beberapa isu logik selepas penukaran penghalaan, seperti statistik halaman, pengendalian ralat, dsb. Tambahkan kod berikut pada router/index.js:

router.afterEach(( to, from ) => {
  const currentPath = to.path;
  const params = to.params;
  console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})

Coretan kod ini akan dilaksanakan selepas setiap suis laluan dan mengeluarkan laluan dan parameter halaman penghalaan semasa. Melalui cangkuk jawatan global, kami dapat memahami dengan lebih baik status penghalaan dan hasil yang sepadan untuk langkah seterusnya pembangunan dan ujian projek.

Ringkasan:

Dalam Penghala Vue, pemintasan laluan adalah komponen yang sangat penting yang boleh digunakan untuk meningkatkan kebolehpercayaan, keselamatan dan kestabilan sistem. Melalui pengawal hadapan global, pengawal eksklusif laluan dan cangkuk pos global, kami boleh mengawal status dan tingkah laku laluan dengan lebih baik. Dalam proses pembangunan sebenar, kita harus memilih kaedah pemintasan laluan yang sesuai berdasarkan situasi sebenar projek untuk memastikan kualiti keseluruhan projek dan pengalaman pengguna.

Atas ialah kandungan terperinci Beberapa kaedah pemintasan penghalaan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!