Cara untuk muncul gesaan apabila vue melompat ke halaman

Vue ialah rangka kerja JavaScript yang sangat popular untuk membina aplikasi web satu halaman interaktif. Walaupun Vue mempunyai banyak ciri berkuasa dan API yang mudah digunakan, apabila ia digunakan dengan penghalaan dan navigasi, kadangkala perlu mencari cara untuk memunculkan gesaan untuk memberitahu pengguna halaman yang akan mereka lawati.

Dalam artikel ini, kami akan meneroka cara mudah untuk mencapai ini menggunakan komponen Vue Router dan Vue.

Langkah 1: Pasang Penghala Vue

Penghala Vue ialah perpustakaan penghala popular yang menyediakan fungsi penghalaan untuk aplikasi Vue. Dalam artikel ini, kami akan menggunakan Penghala Vue untuk mengurus navigasi aplikasi kami.

Untuk memasang Penghala Vue, anda perlu memasangnya daripada npm. Sila gunakan arahan berikut untuk memasang Penghala Vue dalam aplikasi anda:

npm install vue-router --save

Setelah pemasangan selesai, import penghala dalam komponen Vue anda dan konfigurasikannya sebagai sebahagian daripada aplikasi Vue.

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Dalam kod di atas, kami mentakrifkan dua laluan, satu ialah laluan yang menghala ke komponen Laman Utama, dan satu lagi ialah laluan yang menghala ke komponen Perihal. Dalam contoh mudah ini, aplikasi kami hanya mempunyai dua halaman, tetapi anda boleh menambah lebih banyak halaman dan laluan untuk menyesuaikannya dengan keperluan projek anda.

Langkah Kedua: Tambah Makluman Navigasi

Sekarang kami telah mengkonfigurasikan Penghala Vue kami, kami memerlukan cara untuk memaparkan amaran apabila pengguna ingin menavigasi ke halaman lain.

Untuk ini kita boleh menggunakan pengawal navigasi Vue Router. Penghala Vue membolehkan anda menambah perisian tengah penghalaan sebelum atau selepas perubahan penghalaan. Kami akan menentukan pengawal pra-laluan yang akan dipanggil sebelum navigasi dan muncul kotak amaran untuk memberitahu pengguna tentang halaman yang akan mereka lawati.

router.beforeEach((to, from, next) => {
  if (to.name !== 'Home') {
    if (window.confirm('你确定要离开这个页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
})

Dalam kod di atas, kami telah menentukan sebelumSetiap pengawal yang akan dipanggil sebelum setiap peralihan laluan. Dalam pengawal ini, kami menyemak sama ada pengguna cuba menavigasi ke mana-mana halaman selain halaman Utama. Jika ya, kami akan memaparkan kotak amaran yang bertanya kepada pengguna sama ada mereka pasti tentang tindakan ini. Jika pengguna mengklik mengesahkan, mereka akan diubah hala ke laluan baharu. Jika pengguna mengklik Batal, navigasi akan dibatalkan.

Akhir sekali, kita perlu menggunakan pengawal laluan ini dalam komponen Vue. Kita boleh melakukan ini dengan mengimport penghala dalam komponen Vue dan menambah fungsi cangkuk penghala. Berikut ialah contoh:

import router from './router'

export default {
  name: 'App',
  router,
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.name !== 'Home') {
        if (window.confirm('你确定要离开这个页面吗？')) {
          next()
        } else {
          next(false)
        }
      } else {
        next()
      }
    })
  }
}

Dalam kod di atas, kami telah menambah sebelumSetiap pengawal laluan dalam kaedah yang dipasang dalam komponen Aplikasi.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara mudah untuk melaksanakan amaran navigasi menggunakan komponen Vue Router dan Vue. Walaupun pendekatan ini agak menyusahkan, ia boleh memberikan pengguna anda pengalaman interaktif yang lebih selamat dan boleh dipercayai. Jika anda menggunakan Penghala Vue dan Vue, kemudian gunakan kaedah ini untuk menambah beberapa keselamatan tambahan pada aplikasi anda.

Atas ialah kandungan terperinci Cara untuk muncul gesaan apabila vue melompat ke halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!