Cara melaksanakan fungsi rakaman lompat laluan dengan Penghala Vue dan Vue.js

Penghalaan ialah konsep penting apabila membangunkan aplikasi web menggunakan Vue.js. Vue Router ialah perpustakaan penghala rasmi untuk Vue.js, yang membolehkan kami mengawal navigasi aplikasi melalui URL. Penghala Vue menyediakan satu set API untuk mengurus penghalaan aplikasi, termasuk navigasi, lulus parameter, status penghalaan, dsb. Tetapi dalam pembangunan sebenar, kita selalunya perlu merekodkan rekod lompat penghalaan pengguna dalam aplikasi, seperti merekod halaman mana yang dilawati pengguna, kedudukan tatal pengguna dalam halaman, dsb. Artikel ini akan memperkenalkan cara menggunakan Penghala Vue dan pengawal navigasi global Vue.js untuk melaksanakan fungsi rakaman lompat laluan.

1. Gunakan Penghala Vue untuk merekodkan sejarah lompatan penghalaan

Penghala Vue menyediakan objek sejarah penghalaan (sejarah), yang melaluinya kita boleh mendapatkan status penghalaan semasa dan lompatan penghalaan boleh dicapai melalui tolak, ganti dan kaedah lain. Kita boleh merekodkan sejarah lompat laluan dengan mendengar peristiwa objek penghalaan Sebagai contoh, kita boleh merekodkan sejarah lompat laluan dalam kaedah sebelumSetiap objek penghalaan adalah seperti berikut:

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象
  // 记录路由跳转历史
  // ...
  next();
});

Dalam kod di atas, kaedah beforeEach Ia adalah fungsi pengawal navigasi global yang disediakan oleh Vue Router, yang akan dipanggil sebelum laluan melompat. Kita boleh merekodkan sejarah lompat penghalaan pengguna dalam kaedah ini Dalam kod sampel, kita boleh menggunakan parameter ke dan dari untuk mendapatkan objek penghalaan semasa dan objek penghalaan sebelumnya, dan kemudian merekodkannya ke dalam tatasusunan atau menyimpannya secara setempat (Storan Tempatan) untuk pertanyaan seterusnya.

2. Gunakan pengawal navigasi global Vue.js untuk merekod lompatan laluan

Selain merekod sejarah lompatan laluan dalam Penghala Vue, kami juga boleh menggunakan Vue.js untuk menyediakan The fungsi pengawal navigasi global digunakan untuk melaksanakan rakaman lompatan laluan. Vue.js menyediakan tiga fungsi pengawal navigasi global: beforeEach, beforeResolve dan afterEach. Mereka dipanggil sebelum lompat laluan, sebelum resolusi laluan dan selepas lompat laluan masing-masing. Kami boleh merekodkan sejarah lompatan laluan dalam fungsi pengawal navigasi ini Kod sampel adalah seperti berikut:

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // 记录路由跳转历史
  // ...
  next();
});

Vue.mixin({
  beforeRouteLeave (to, from, next) {
    // 记录路由跳转历史
    // ...
    next();
  }
});

Dalam kod di atas, kami menggunakan kaedah Vue.mixin untuk menambah fungsi pengawal navigasi global pada Vue. komponen. Dalam fungsi beforeRouteLeave, kita boleh merekodkan sejarah lompat laluan pengguna Fungsi ini akan dipanggil apabila komponen akan meninggalkan laluan semasa. Kami boleh merekodkan sejarah lompatan laluan ke dalam tatasusunan atau storan setempat.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Penghala Vue dan pengawal navigasi global Vue.js untuk merekod sejarah lompatan laluan pengguna. Dalam pembangunan sebenar, kita boleh memilih kaedah yang hendak digunakan untuk merekodkan sejarah lompatan penghalaan mengikut keperluan tertentu Contohnya, kita boleh menggunakan Penghala Vue untuk merekod sejarah akses pengguna, dan menggunakan pengawal navigasi global Vue.js untuk merekod lompatan beberapa. peristiwa istimewa. Sejarah lompatan laluan adalah keperluan biasa semasa melaksanakannya, anda perlu memberi perhatian kepada isu prestasi dan kapasiti storan.

Atas ialah kandungan terperinci Cara melaksanakan fungsi rakaman lompat laluan dengan Penghala Vue dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!