Bagaimana untuk melompat ke halaman dan menyimpan data borang dalam vue

Vue ialah rangka kerja JavaScript moden dan mudah dikembangkan yang membolehkan pembangun membina aplikasi satu halaman (SPA) dengan mudah. Ciri penting rangka kerja Vue ialah keupayaan untuk mengemas kini kandungan halaman secara dinamik tanpa menyegarkan keseluruhan halaman, yang boleh meningkatkan kelajuan tindak balas aplikasi dan pengalaman pengguna. Walau bagaimanapun, semasa proses pembangunan, agak sukar untuk menyelesaikan masalah pemindahan data Artikel ini akan memperkenalkan cara mengekalkan data borang selepas Vue melompat ke halaman.

Storan Data Bahagian Pelanggan

Dalam Vue, kami biasanya menggunakan storan data sisi pelanggan (Storan Data Bahagian Pelanggan) untuk menyelesaikan masalah pemindahan data. Anda boleh menyimpan data dalam ingatan, dalam kuki, dalam cache penyemak imbas (localStorage dan sessionStorage), atau menggunakan pangkalan data. Untuk tujuan artikel ini, kami akan memberi tumpuan terutamanya pada caching penyemak imbas. Menggunakan cache penyemak imbas, data pelanggan boleh disimpan dalam penyemak imbas pelanggan, dan apabila pengguna melawat tapak yang sama, data boleh dipulihkan secara automatik daripada cache penyemak imbas.

Vue-router

Dalam projek Vue, Vue-router biasanya digunakan untuk mengurus penghalaan untuk mencapai lompatan antara halaman. Vue-router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue, yang boleh membantu kami membina aplikasi web satu halaman dengan cepat.

Fungsi pra cangkuk Vue-router

Fungsi pra cangkuk dalam penghala Vue ialah fungsi yang dilaksanakan sebelum laluan melompat. Vue-router menyediakan pelbagai fungsi pra-cangkuk Di sini kami menggunakan fungsi beforeRouteLeave untuk melaksanakan beberapa operasi sebelum meninggalkan laluan semasa, seperti menyimpan data borang.

Gunakan fungsi beforeRouteLeave untuk menyimpan data borang

Kami boleh menyimpan data borang dalam fungsi beforeRouteLeave dan menyimpan data dalam sessionStorage selepas meninggalkan halaman semasa. Pada kali berikutnya pengguna melawat halaman, kami boleh memulihkan data terus dari sessionStorage.

Berikut ialah contoh:

beforeRouteLeave (to, from, next) {
  // 保存表单数据
  sessionStorage.setItem('form_data', JSON.stringify(this.form));
  next();
}

Gunakan fungsi cangkuk yang dicipta untuk memulihkan data borang

Kami boleh memulihkan data borang dalam fungsi cangkuk yang dicipta dan memuatkan data daripada sessionStorage ke dalam aplikasi.

Berikut ialah contoh:

created () {
  // 从 sessionStorage 中恢复表单数据
  const formDataString = sessionStorage.getItem('form_data');
  if (formDataString) {
    this.form = JSON.parse(formDataString);
  }
}

Ia boleh dilihat bahawa menggunakan beforeRouteLeave dan fungsi cangkuk yang dicipta boleh dengan mudah melaksanakan fungsi mengekalkan data borang selepas Vue melompat ke halaman, dan ia juga boleh meningkatkan Pengalaman pengguna aplikasi.

Aplikasi Praktikal

Di atas adalah contoh mudah Dalam aplikasi sebenar, kita boleh menggunakannya secara fleksibel mengikut keperluan. Sebagai contoh, simpan data borang pada halaman pengeditan dan pulihkan data semasa mengembalikan data pada halaman baharu, tetapi jangan gunakan sessionStorage pada halaman semasa, dan kemudian pulihkan data selepas pergi ke halaman lain; untuk menyimpan data untuk masa yang lama, dsb.

Kesimpulan

Vue mengekalkan data borang selepas melompat ke halaman adalah keperluan biasa, yang boleh dicapai dengan mudah menggunakan storan data sisi klien dan fungsi pra cangkuk. Dalam pembangunan sebenar, kami boleh menggunakan kaedah ini secara fleksibel mengikut keperluan untuk meningkatkan pengalaman pengguna aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke halaman dan menyimpan data borang dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!