Mari kita bincangkan tentang cara vue menghalang sejarah H5 daripada memuat semula halaman

Dengan populariti aplikasi web, rangka kerja bahagian hadapan telah menjadi pilihan pertama untuk pembangun. Vue ialah salah satu rangka kerja popular yang membolehkan pembangun membina aplikasi satu halaman, meningkatkan pengalaman pengguna dan kelancaran. Walau bagaimanapun, ramai pembangun mungkin menghadapi masalah, iaitu bagaimana untuk menghalang sejarah H5 daripada menyegarkan halaman. Artikel ini akan memperkenalkan anda kepada cara menyelesaikan masalah ini dalam aplikasi web H5 menggunakan Vue.js.

Dalam Vue.js, kita boleh menggunakan "penghalaan" untuk menyelesaikan masalah ini. Laluan boleh ditakrifkan dalam Vue.js, membolehkan kami melaksanakan aplikasi satu halaman dalam aplikasi web H5. Penghalaan memberitahu halaman komponen mana yang harus dipaparkan di URL mana. Dengan cara ini, kami boleh mensimulasikan perubahan pada kandungan halaman dengan menukar URL ini dan bukannya memuatkan semula keseluruhan halaman. Oleh itu, penghalaan dalam Vue.js menyembunyikan sebahagian besar butiran pelaksanaan tapak web dan memberikan pengalaman pengguna yang lebih baik.

Sebelum mempelajari cara menghalang sejarah H5 daripada memuat semula halaman, kita perlu melaksanakan penghalaan dalam Vue.js terlebih dahulu. Kami akan menggunakan perpustakaan vue-router, yang merupakan salah satu perpustakaan rasmi untuk Vue.js. Pertama, kami perlu memasang perpustakaan ini dalam projek kami. Kita boleh menggunakan npm atau yarn, masukkan arahan berikut dalam baris arahan:

npm install vue-router

yarn add vue-router

Selepas memasang vue-router, kami perlu mengimportnya dalam aplikasi Vue.js kami dan menggunakan Ia mentakrifkan laluan aplikasi. Dalam contoh berikut, kami akan mencipta laluan untuk memaparkan halaman utama, halaman log masuk dan halaman pendaftaran.

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    { path: '/', component: HomePage },
    { path: '/login', component: LoginPage },
    { path: '/register', component: RegisterPage }
];

const router = new VueRouter({
    routes
});

Dalam contoh di atas, kami menggunakan VueRouter untuk mengimport laluan dalam Vue.js dan menggunakannya untuk menentukan laluan ke aplikasi. Laluan ini menentukan komponen mana yang harus digunakan oleh aplikasi untuk memaparkan halaman. Dalam contoh ini, kami telah menentukan tiga laluan: halaman utama, halaman log masuk dan halaman pendaftaran. Kini kami boleh menggunakan laluan ini dalam aplikasi Vue.js kami dan bukannya menukar keseluruhan halaman.

Memandangkan kami telah menentukan tapak web kami menggunakan vue-router, seterusnya, kami akan menggunakan API sejarah Vue.js dan HTML5 untuk menghalang sejarah H5 daripada memuat semula halaman. API Sejarah HTML5 menyediakan cara untuk menukar URL halaman tanpa memuat semula keseluruhan halaman. Menggunakan kaedah history.pushState() HTML5, kami boleh menukar URL dan menambahkannya pada sejarah penyemak imbas tanpa memuat semula keseluruhan halaman. Kami boleh menggunakan ini dalam komponen Vue.js untuk mengemas kini URL.

Dalam contoh berikut, kita akan melihat cara menggunakan kaedah history.pushState() HTML5 dalam Vue.js untuk menghalang sejarah H5 daripada memuat semula halaman. Kami akan memanggil ini dalam fungsi pemasangan kitaran hayat Vue.js untuk memastikan ia dipanggil apabila halaman dimuatkan.

export default {
    mounted() {
        const path = window.location.pathname;
        history.pushState({ path }, '', path);
    }
}

Dalam contoh di atas, kami memanggil kaedah history.pushState() dalam cangkuk kitaran hayat Vue.js. Kami menambah URL pada sejarah dan mengembalikan objek kepada kaedah yang mengandungi laluan yang kami tentukan. Kini kami boleh mengemas kini URL tanpa memuat semula keseluruhan halaman.

Dalam artikel ini, kami mempelajari cara menggunakan penghalaan Vue.js dan API sejarah HTML5 untuk menghalang sejarah H5 daripada menyegarkan halaman dan meningkatkan prestasi serta pengalaman pengguna tapak web. Untuk mencapai matlamat ini, kami menggunakan perpustakaan vue-router dan cangkuk kitaran hayat Vue.js untuk memanggil kaedah history.pushState() HTML5. Kini, kami boleh menggunakan Vue.js untuk membangunkan aplikasi tapak web H5 yang lebih baik tanpa memuat semula keseluruhan halaman.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara vue menghalang sejarah H5 daripada memuat semula halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!