Analisis ringkas tentang perbezaan antara cincang dan sejarah dalam penghalaan bahagian hadapan Vue

VueApakah perbezaan antara cincang penghalaan bahagian hadapan dan sejarah? Dalam artikel ini, kita akan mempelajari tentang perbezaan antara cincang penghalaan hadapan dan sejarah. Saya harap ia akan membantu semua orang!

Sebelum anda memahami kedua-dua laluan ini, sama ada vue atau react, anda pasti akan memilih antara laluan semasa membuat projek Dalam hash dan history pasti akan terjerat, atau anda hanya akan bercelaru dan menggunakan laluan lalai # dengan hash Selepas membaca perkongsian ini, saya jamin anda tidak akan menghadapi masalah memilih laluan yang perlu dipilih pilih. Jika anda mempunyai sebarang soalan, sila nyatakan di ruangan komen dan mari kita berkomunikasi bersama.

Pengenalan ringkas kepada Penghala Vue

• Vue Router ialah pemalam penghalaan rasmi Vue.js , yang serasi dengan Vue js sangat bersepadu dan sesuai untuk membina aplikasi satu halaman. Aplikasi satu halaman vue adalah berdasarkan penghalaan dan Penghalaan digunakan untuk menetapkan laluan akses dan memetakan laluan serta komponen. Aplikasi halaman tradisional menggunakan beberapa hiperpautan untuk mencapai penukaran dan lompatan halaman. Dalam aplikasi satu halaman vue-router, ia adalah penukaran antara laluan, iaitu penukaran komponen. Intipati modul penghalaan adalah untuk mewujudkan hubungan pemetaan antara url dan halaman. (Belajar perkongsian video: tutorial video vue)
• Mengapa kami tidak boleh menggunakan tag a, ini kerana semua yang kami gunakan Vue untuk lakukan adalah aplikasi satu halaman, yang adalah bersamaan dengan hanya mempunyai satu halaman index.html utama, jadi tag yang anda tulis tidak akan berfungsi, anda mesti menggunakan vue-router untuk pengurusan.

Prinsip pelaksanaan Vue Router

• Sebelum memahami mod penghalaan, kita mesti memahami dahulu apakah prinsip pelaksanaan vue-roter Apakah aplikasi satu halaman dan apakah ciri-cirinya. Ini akan memudahkan anda untuk mendalami pemahaman anda tentang penghalaan.

• SPA Satu halaman dan kaedah aplikasi: Satu halaman aplikasi hanya mempunyai satu halaman lengkap; apabila ia memuatkan halaman untuk kali pertama, ia akan memuatkan satu-satunya html halaman Muat turun bersama-sama dengan semua komponen halaman lain, supaya apabila menukar halaman, ia tidak akan memuatkan keseluruhan halaman, tetapi hanya mengemas kini kandungan dalam bekas yang ditentukan.

• Salah satu teras aplikasi satu halaman (SPA) ialah: mengemas kini paparan tanpa meminta semula halaman.

• Tiga langkah utama pelaksanaan asas objek penghala ialah (1) Pantau perubahan bar alamat; (2) Cari halaman yang sepadan dengannya komponen laluan semasa; (3) Gantikan komponen halaman yang ditemui dengan kepada kedudukan router-vieW.

• vue-router Apabila melaksanakan penghalaan muka hadapan satu halaman, dua kaedah disediakan: mod Hash dan mod History menentukan yang mana satu untuk digunakan berdasarkan Satu cara, vue3 ialah parameter mode Di bawah kita akan mengetahui lebih lanjut tentang atribut ini. history

  

Hash

Penerangan ringkas

• Mod cincang lalai - Gunakan cincang URL untuk mensimulasikan URL lengkap, jadi apabila URL berubah, halaman tidak akan dimuatkan semula. vue-router (#) ialah titik utama hash, yang mewakili kedudukan dalam halaman web Jika anda hanya menukar bahagian selepas URL, penyemak imbas hanya akan menatal ke kedudukan yang sepadan dan tidak akan memuatkan semula web. Halaman. Maksudnya # digunakan untuk membimbing tindakan penyemak imbas dan tidak berguna sama sekali pada bahagian pelayan # Pada masa yang sama, setiap kali bahagian selepas HTTP ditukar , ia akan disertakan dalam sejarah akses penyemak imbas dan gunakan butang "Kembali" untuk kembali ke kedudukan sebelumnya. > kedudukan mengikut nilai yang berbeza. ##hashDOM

  Simbol itu sendiri dan aksara yang mengikutinya dipanggil
dan boleh dibaca melalui atribut
• .

Ciri

• hash, walaupun terdapat dalam URL, tidak akan disertakan dalam permintaan HTTP. Ia digunakan untuk membimbing tindakan penyemak imbas dan tidak berguna sama sekali pada bahagian pelayan Oleh itu, menukar hash tidak akan memuatkan semula halaman
• Anda boleh menambah acara mendengar untuk perubahan dalam hash:

•    window.addEventListener("hashchange", fncEvent, false)

Setiap kali cincangan (
• ) ditukar, rekod akan ditambahkan pada sejarah akses penyemak imbas window.location.hash
url dengan nombor
• . #

Tetapan

tetapan vue3
• Penghalaan corak hash

  

sejarah

Penerangan ringkas

• ialah satu lagi mod penghalaan, Sejak mod hash akan mengandungi # dalam URL, jika kami tidak mahu mengandungi #, kami boleh menggunakan mod penghalaan history Kami hanya perlu menambahkannya semasa mengkonfigurasi peraturan dalam respons history 🎜> lalai Adalah corak router. vuehash mengambil kesempatan daripada kaedah
dan
• baharu dalam HTML5 History Interface. pushState() replaceState()Kedua-dua kaedah ini digunakan pada timbunan sejarah penyemak imbas Berdasarkan
sedia ada, ia menyediakan fungsi mengubah suai sejarah. Cuma apabila mereka melakukan pengubahsuaian, walaupun URL semasa telah ditukar, penyemak imbas tidak segera menghantar permintaan ke bahagian belakang.
• back、forward、go

Tetapan

Ciri

Lompat laluan No perlu memuat semula halaman.

• Tanpa #, kebanyakan orang berpendapat ia kelihatan lebih baik daripada penghalaan cincang.
• Keserasian tidak sebaik cincang, yang akan diterangkan di bawah

Masalah dan penyelesaian persekitaran pengeluaran

Bila kami meletakkan sejarah Selepas projek digunakan ke pelayan, kami memasukkan URL dalam penyemak imbas (contohnya,

Pada masa ini, ia akan dihuraikan oleh DNS Selepas mendapat alamat IP, kami akan memulakan permintaan ke pelayan berdasarkan alamat IP Selepas pelayan menerima permintaan , dan kemudian kembalikan hasil yang sepadan (html, css, js). Jika kami menyediakan ubah hala di bahagian hadapan, halaman akan melompat ke
• dan bahagian hadapan akan sepadan dengan komponen yang sepadan dan menjadikannya halaman. Jika kami memuat semula halaman pada masa ini, penyemak imbas akan menghantar permintaan baharu www.test.com Jika pelayan bahagian belakang tidak mempunyai antara muka yang sepadan dengan /home, maka 404 akan dikembalikan. www.test.com/homewww.test.com/home

  

  Penyelesaian kepada penyegaran persekitaran pengeluaran 404 boleh dilakukan dengan pemajuan proksi dalam
dan dikonfigurasikan dalam nginx untuk menyemak sama ada sumber dalam parameter wujud mengikut susunan. Jika tiada yang ditemui, Biarkan nginx halakan secara dalaman ke halaman utama projek.
• nginx

  

Persekitaran pembangunan - historyApiFallback

Sesetengah rakan mungkin tertanya-tanya mengapa persekitaran pembangunan yang saya miliki 't menghadapi masalah ini bukankah operasi penyegaran yang sama seperti dalam pengeluaran?

• 

Saya juga mempunyai soalan di sini Selepas menyemak maklumat yang berkaitan, saya mendapati bahawa
• dalam

  membantu kami mengendalikannya vue-cli. webpack

  

Jika kami menukar konfigurasi ini kepada palsu, penyemak imbas akan menganggap permintaan kami sebagai permintaan dapatkan Jika bahagian belakang tidak mempunyai antara muka yang sepadan, ia akan muncul Mesej ralat berikut.

• 

  

Ringkasan

Itulah ia Kami tahu dua mod penghalaan
• dan perbezaannya secara ringkas,

  bagus untuk keserasian penghalaan, tetapi kelihatan hodoh dengan vue-roter adalah sama seperti laluan url biasa, tetapi ia memerlukan untuk dikonfigurasikan pada pelayan. Semua orang boleh menggunakannya mengikut keperluan masing-masing. Pelajar yang mempunyai soalan dialu-alukan untuk berkomunikasi di ruangan komen. hash

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

Atas ialah kandungan terperinci Analisis ringkas tentang perbezaan antara cincang dan sejarah dalam penghalaan bahagian hadapan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!