Rumah >hujung hadapan web >View.js >Analisis ringkas tentang perbezaan antara penghalaan cincang dan penghalaan sejarah dalam Vue
Apabila menggunakan pemaparan bahagian hadapan seperti Vue atau React, biasanya terdapat dua kaedah penghalaan: penghalaan cincang dan penghalaan sejarah. Jadi apakah perbezaan antara kedua-dua kaedah penghalaan ini? Izinkan saya memperkenalkannya kepada anda di bawah, saya harap ia akan membantu anda!
Mari kita selesaikan perbezaan antara dua mod penghalaan cincang dan penghalaan sejarah dari aspek berikut:
dalam URL dalam bar alamat. Contohnya, URL ini: hash
, nilai #
ialah http://www.abc.com/#/hello
. Cirinya ialah walaupun cincangan muncul dalam URL, ia tidak akan disertakan dalam permintaan HTTP dan tidak mempunyai kesan pada bahagian belakang sama sekali, jadi menukar cincang tidak akan memuatkan semula halaman. [Cadangan berkaitan: "hash
tutorial vue.js#/hello
"]
dalam bar alamat. Contohnya, URL ini: history
lebih cantik dan URL biasa, sesuai untuk promosi. #
http://www.abc.com/hello
2. Fungsi
Oleh itu, jika anda ingin mengalih keluar tanda history
, anda mesti menggunakan mod sejarah, bagaimanapun, terdapat masalah lain dengan menggunakan mod sejarah. Apabila mengakses halaman kedua Apabila melakukan operasi muat semula, ralat 404 akan muncul Kemudian anda perlu bekerjasama dengan orang bahagian belakang dan biarkan dia mengkonfigurasi pengalihan url apache atau nginx untuk mengubah hala ke laluan halaman utama anda. #
#
3 Tekan Enter untuk memuat semula
hash
Dua kaedah ini digunakan pada timbunan sejarah penyemak imbas Berdasarkan kaedah
hanya boleh menukar URL bar alamat semasa, tetapi penyemak imbas tidak akan menghantar permintaan ke bahagian belakang, dan ia juga tidak akan mencetuskan pelaksanaan acara popstate Secara amnya, 404 akan muncul pada masa ini, Anda perlu bekerjasama dengan orang belakang untuk menyediakan pengalihan. history
pushState()
replaceState()
4. Senario Penggunaan back()
forward()
Dalam keadaan biasa, kedua-dua cincangan dan sejarah boleh diterima Jika anda seorang pencinta kecantikan, simbol go()
sepatutnya termasuk dalam URL saya rasa sedikit tidak berpuas hati. Jika kami tidak mahu cincang yang jelek, kami boleh menggunakan mod sejarah penghalaan, yang menggunakan sepenuhnya API history.pushState untuk melengkapkan lompatan URL tanpa memuat semula halaman. Berbanding dengan mengubah suai cincang secara langsung, memanggil history.pushState() mempunyai kelebihan berikut:
#
Sebarang jenis data boleh ditambah melalui parameter stateObject pada rekod manakala cincang hanya boleh menambah rentetan pendek
pushState()
Penghalaan tradisional ialah apabila pengguna mengakses URL, pelayan yang sepadan akan menerima permintaan dan kemudian menghuraikan laluan dalam URL untuk melaksanakan Corresponding. memproses logik, dengan itu melengkapkan pengagihan laluan.
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: pushState()
Video Pengaturcaraan
Atas ialah kandungan terperinci Analisis ringkas tentang perbezaan antara penghalaan cincang dan penghalaan sejarah dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!