Penghalaan Berasaskan Hash berbanding Berasaskan Laluan
Bandingkan penghalaan hash dengan penghalaan sejarah berasaskan pushState
Penghalaan Berasaskan Hash berbanding Berasaskan Laluan ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Dua Strategi untuk URL SPA
SPA memerlukan URL yang tidak akan diambil oleh pelayar. Terdapat dua pendekatan: berasaskan cincangan menggunakan fragmen, iaitu segala-galanya selepas tanda #, yang tidak pernah dihantar oleh pelayar kepada pelayan; manakala berasaskan laluan menggunakan nama laluan bersama helah API Sejarah.
Penghalaan Berasaskan Cincangan
URL kelihatan seperti https://example.com/#/about. Pelayan hanya melihat / dan menyajikan HTML yang sama untuk setiap URL. JS pada pihak klien membaca location.hash untuk menentukan paparan yang hendak dipaparkan. Kaedah ini ringkas dan tidak memerlukan konfigurasi pelayan.
Peristiwa hashchange
Penghala berasaskan cincangan mendengar peristiwa hashchange, yang dicetuskan setiap kali location.hash berubah. Digabungkan dengan pembacaan window.location.hash, inilah semua API yang diperlukan untuk penghalaan pada pihak klien — tiada API Sejarah terlibat.
window.addEventListener("hashchange", () => {
const route = location.hash.slice(1) || "/";
renderPage(route);
});Penghalaan Berasaskan Laluan
URL kelihatan seperti https://example.com/about — tidak dapat dibezakan daripada URL yang dipaparkan oleh pelayan. pushState dalam API Sejarah mengubah laluan tanpa memuat semula halaman; popstate dicetuskan semasa kembali atau maju; pemintasan klik menukarkan <a> kepada navigasi SPA.
Konfigurasi Pelayan Diperlukan
Untuk penghalaan berasaskan laluan, pelayan mesti memulangkan index.html SPA untuk apa-apa laluan yang mungkin dimasukkan atau dimuat semula oleh pengguna. Jika tidak, pemuatan semula /about akan menghasilkan 404. Konfigurasikannya dengan mencuba fail tersebut dahulu, kemudian gunakan index.html sebagai sandaran — sandaran sejarah dalam Nginx dan vite-plugin-history-api dalam pembangunan Vite.
# Nginx config
location / {
try_files $uri $uri/ /index.html;
}SEO dan Perkongsian
Enjin carian dan banyak alat langsung tidak boleh merangkak fragmen cincangan — kandungan di /#/about tidak kelihatan kepada perangkak lama. Google mengendalikannya melalui paparan tanpa antara muka, tetapi yang lain mungkin tidak. URL berasaskan laluan dirangkak seperti biasa, menjadikannya jauh lebih baik untuk SEO.
Persepsi Pengguna
URL bercincang kelihatan “pelik” — pengguna akan melihat tanda # dan mungkin tidak mempercayai pautan itu atau terlupa menyalin URL penuh. URL berasaskan laluan kelihatan seperti URL web lain, seperti yang dijangkakan oleh pengguna. SPA moden hampir sentiasa memilih penghalaan berasaskan laluan atas sebab ini sahaja.
Kerumitan Pelaksanaan
Berasaskan cincangan: kira-kira 10 baris JS, iaitu pendengar hashchange + paparan. Berasaskan laluan: panggilan pushState, pendengar popstate, pemintasan klik pautan dan sandaran pada pihak pelayan. Cincangan ialah pilihan paling ringan; laluan memerlukan lebih banyak prasarana untuk pengalaman pengguna yang lebih baik.
Pertimbangan Pengehosan Statik
Hos statik sepenuhnya, seperti konfigurasi lalai GitHub Pages, tidak boleh melakukan sandaran pada pihak pelayan, jadi penghalaan berasaskan laluan rosak apabila dimuat semula. Penyelesaiannya termasuk helah pengubahan hala 404.html, pengehosan di Netlify atau Vercel yang memahami sandaran SPA, atau menerima penghalaan berasaskan cincangan untuk projek yang hanya menggunakan hos statik.
Pendekatan Hibrid
Sesetengah aplikasi mencampurkan kedua-duanya: berasaskan laluan untuk laluan utama dan cincangan untuk bahagian dalam halaman, seperti modal atau sauh tab. Peristiwa hashchange masih dicetuskan untuk keadaan ini, melengkapi penghala berasaskan Sejarah bagi keadaan subhalaman tanpa memenuhi URL utama.
Berpindah antara Kedua-duanya
Untuk berpindah daripada cincangan kepada laluan: tulis semula semua pautan dalaman, tambah sandaran pelayan, gantikan logik hashchange dengan popstate, dan ubah hala URL cincangan lama kepada padanan berasaskan laluan menggunakan skrip permulaan kecil yang berjalan sekali dan memanggil history.replaceState.
Kriteria Pemilihan
Pilih penghalaan berasaskan cincangan untuk hos statik tanpa penulisan semula, alat pentadbiran dalaman yang tidak memerlukan SEO dan widget terbenam. Pilih penghalaan berasaskan laluan untuk apa-apa yang menghadap pengguna, apa-apa yang sepatutnya diindeks oleh SEO dan apa-apa yang dikongsi di media sosial — iaitu kebanyakan aplikasi.
Semakan Pengetahuan
Mengapakah penghalaan SPA berasaskan laluan memerlukan konfigurasi pelayan sedangkan penghalaan berasaskan cincangan tidak?
Ringkasan
Penghalaan berasaskan cincangan, dengan URL seperti /#/about, tidak memerlukan konfigurasi pelayan tetapi mempunyai SEO yang lemah dan menggunakan URL yang tidak kemas. Penghalaan berasaskan laluan, dengan URL seperti /about, memerlukan sandaran pelayan kepada index.html tetapi menghasilkan URL yang kemas, mesra SEO dan mudah dikongsi. SPA moden yang menghadap orang awam menggunakan laluan; projek hos statik atau dalaman mungkin masih memilih cincangan demi kesederhanaan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Penghalaan Berasaskan Hash berbanding Berasaskan Laluan” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Penghalaan Berasaskan Hash berbanding Berasaskan Laluan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penghalaan Berasaskan Hash berbanding Berasaskan Laluan”?
Bandingkan penghalaan hash dengan penghalaan sejarah berasaskan pushState Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Penghalaan Berasaskan Hash berbanding Berasaskan Laluan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- pushState dan replaceState
- Peristiwa popstate
- Penghalaan Berasaskan Hash berbanding Berasaskan Laluan
- API Navigasi pelayar moden