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.
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.
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 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.
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(); }
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.
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.
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!