Apakah mod penghalaan vue?

Mod penghalaan Vue termasuk: 1. Mod cincang, yang menggunakan nilai cincang URL sebagai laluan dan menyokong semua pelayar aksara "#" akan muncul dalam laluan URL. 2. Mod sejarah, yang bergantung pada API HTML5 (tidak disokong oleh pelayar lama) dan konfigurasi pelayan HTTP Tanpa konfigurasi latar belakang, 404 akan muncul apabila halaman dimuat semula 3. Mod abstrak, terpakai untuk semua persekitaran JavaScript, jika tiada API pelayar , penghala akan secara automatik dipaksa ke dalam mod ini.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Analisis mod penghalaan

Di sini kita akan bercakap tentang mod penghalaan vue-router Perkara pertama yang perlu difahami ialah penghalaan terdiri daripada berbilang URL dan berbeza URL digunakan Anda boleh menavigasi ke lokasi yang berbeza dengan sewajarnya. Jika anda telah melakukan pembangunan pelayan atau mempunyai sedikit pemahaman tentang protokol http, anda akan mengetahui bahawa akses kepada halaman dalam penyemak imbas adalah tanpa status, jadi kami akan meminta semula apabila menukar halaman yang berbeza. Jika anda benar-benar membangun menggunakan vue dan vue-router, anda akan faham bahawa apabila menukar halaman, tiada permintaan semula atau muat semula halaman Nampaknya halaman tersebut adalah berstatus. Ini sebenarnya dicapai dengan bantuan API Sejarah penyemak imbas, yang membolehkan halaman melompat tanpa menyegarkan semula, dan status halaman dikekalkan dalam penyemak imbas.

1. Mod cincang

Gunakan cincang URL untuk mensimulasikan URL lengkap, jadi apabila URL berubah, halaman tidak akan dimuatkan semula dan rangkaian ia memaparkan Akan ada tanda "#" dalam laluan, yang sedikit hodoh. Ini adalah mod paling selamat kerana ia serasi dengan semua penyemak imbas dan pelayan.

1-Ciri: Alamat url mod cincang mempunyai '#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

di mana #/aaa ialah nilai cincang kami dan nilai cincang Ia tidak akan dihantar ke pelayan

2-Prinsip pelaksanaan:

Acara hashChange asli terutamanya memantau perubahan nilai hash melalui acara window.onHashChange=function(){}

3-Muat semula halaman:

Tidak akan ada permintaan, halaman tidak akan menghadapi sebarang masalah, tiada kerjasama back-end diperlukan

dan keserasian mod cincang dibandingkan Baik Tetapi kerana ia mengandungi '#', barisnya yang cantik tidak sebaik mod sejarah.

2. Mod Sejarah

Mod cincang yang dipercantik akan mengalih keluar "#" dalam laluan. Ia bergantung pada sejarah dan pushState API Html5, jadi anda tidak perlu risau tentang IE9 dan versi yang lebih baru. Ia juga termasuk tiga kaedah: ke belakang, ke hadapan dan pergi, yang sepadan dengan operasi ke hadapan, ke belakang dan lompat penyemak imbas. Ia adalah operasi yang dilakukan oleh butang hadapan dan belakang di sudut kiri atas pelayar. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

Tetapi sejarah juga mempunyai kekurangan Anda tidak takut melompat ke hadapan dan ke belakang, tetapi anda takut menyegarkan (Jika bahagian belakang tidak disediakan), kerana penyegaran sebenarnya meminta pelayan.

Untuk meringkaskan

1: mod cincang (URL mod lalai vue-router diikuti dengan #) menggunakan nilai cincang URL sebagai route. Menyokong semua pelayar Kelemahan: Anda hanya boleh menukar # berikut untuk mencapai lompatan laluan.
2: Mod sejarah (tukar kepada mod sejarah melalui mod: 'sejarah') HTML5 (BOM) API Sejarah dan kekurangan konfigurasi pelayan: takut untuk muat semula Jika bahagian belakang tidak mengendalikan situasi ini, muat semula bahagian hadapan ialah a permintaan sebenar. Pelayan memakan banyak masa dan sangat perlahan.

3. Mod abstrak

Abstrak ialah mod ketiga dalam penghalaan Vue Ia digunakan untuk bertindak sebagai sandaran dalam persekitaran yang tidak menyokong API penyemak imbas cincang atau mod sejarah, ia akan memberi kesan pada URL pada penyemak imbas Fungsi umum yang ingin dicapai adalah untuk membenamkan halaman penghalaan lain dalam halaman penghalaan sedia ada dan memastikan penghalaan halaman semasa dipaparkan dalam laluan , ini ialah mod penghalaan abstrak yang diasingkan daripada penyemak imbas.

Berfungsi dalam semua persekitaran JavaScript, seperti bahagian pelayan menggunakan Node.js. Tanpa API penyemak imbas, penghala akan secara automatik dipaksa ke mod ini.

Kemudian tukar di sini

const router = new VueRouter({routes, mode:'hash|history|abstract',})

.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Apakah mod penghalaan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!