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:

1

: Itulah simbol

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: "hashtutorial vue.js#/hello"]

: Tiada

dalam bar alamat. Contohnya, URL ini: history lebih cantik dan URL biasa, sesuai untuk promosi. #http://www.abc.com/hello2. Fungsi

: Semasa membangunkan apl, terdapat halaman perkongsian ini dibuat dengan vue atau bertindak balas Kami berkongsi halaman ini dengan pihak ketiga apl, URL dalam sesetengah apl tidak dibenarkan mengandungi tanda

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

• : Walaupun ia muncul dalam URL, ia tidak akan disertakan dalam permintaan HTTP dan tidak mempunyai kesan pada backend sama sekali, menukar cincang tidak akan memuatkan semula halaman;

  hashDua kaedah ini digunakan pada timbunan sejarah penyemak imbas Berdasarkan kaedah

  ,
dan
• sedia ada, kedua-dua kaedah ini menyediakan akses kepada rekod sejarah. Apabila menggunakan dua kaedah ini untuk melakukan pengubahsuaian,

  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. historypushState() 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:

Set URL baharu boleh menjadi mana-mana URL yang mempunyai asal yang sama dengan URL semasa ; manakala cincang sahaja Bahagian selepas # boleh diubah suai, jadi anda hanya boleh menetapkan URL dokumen yang sama seperti URL semasa; sama seperti URL semasa, yang juga akan menambah rekod pada tindanan; nilai baharu yang ditetapkan oleh cincang mestilah berbeza daripada yang asal untuk mencetuskan tindakan menambah rekod pada tindanan; 🎜>

# Sebarang jenis data boleh ditambah melalui parameter stateObject pada rekod manakala cincang hanya boleh menambah rentetan pendek

dan boleh menetapkan atribut tajuk untuk kegunaan seterusnya.

1. 5 Ringkasan

   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.

Penghalaan bahagian hadapan tidak melibatkan pelayan Ia dilaksanakan oleh bahagian hadapan menggunakan cincang atau API sejarah HTML5 Ia biasanya digunakan untuk paparan dan penukaran kandungan yang berbeza.

2. 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!