Jadual Kandungan
Untuk menyelesaikan masalah ini: Jika anda menggunakan
Dua mod dalam
dan satu lagi mod
Rumah hujung hadapan web View.js Mari kita bincangkan tentang dua mod penghalaan Vue (cincang dan sejarah)

Mari kita bincangkan tentang dua mod penghalaan Vue (cincang dan sejarah)

Apr 12, 2023 pm 05:50 PM
vue javascript hujung hadapan

Mari kita bincangkan tentang dua mod penghalaan Vue (cincang dan sejarah)

Penghala mempunyai dua mod: satu ialah mod hash dan satu lagi ialah mod history Apabila menggunakan vue-cli dan vue-router yang dibina secara lalaivueProjek, jika tiada konfigurasi khas dibuat, mod lalai ialah hash

Setiap dua mod ini mempunyai kelebihan tersendiri, tetapi perbezaan penggunaannya akan lebih kurang ditanya semasa temuduga

Mari kita belajar bersama hari ini

Mod cincang (cincang)

mod vue-router Lalai, menggunakan hash cincang (url) Untuk mensimulasikan , halaman tidak akan dimuat semula apabila hash berubah. [Cadangan berkaitan: URLtutorial video vuejsURL, pembangunan bahagian hadapan web] adalah seperti berikut

http://localhost/#home
Salin selepas log masuk
Ciri

: Parameter selepas nombor tidak akan dihantar ke pelayan Ia mempunyai keserasian yang baik dan tidak akan dihantar ke pelayan sebagai sebahagian daripada laluan iaitu, ia tidak akan disertakan dalam permintaan badan dan tidak mempunyai kesan pada bahagian belakang sama sekali. Cuma kami pelajar Front-end bermain sendiri #HTTP Apabila halaman dimuat semula, ia akan kekal pada halaman semasa dan tidak akan dimuat semula

Jika anda rasa laluan

adalah hodoh dan tidak ringkas, kami boleh menggunakan penghalaan

Mod, mod ini menggunakan sepenuhnya hash atau history untuk melengkapkan, history.pushState APImelompat tanpa memuatkan semula halaman replaceStateurlMod sejarah

mod: dalam instantiasi Cuma tambah mod

pada objek konfigurasi dan nilainya ialah history. Selepas pengubahsuaian, mod mode akan menjadi mod history hashhistory

Tiada masalah untuk menggunakan kedua-dua kaedah ini Jika anda mengambil berat tentang penampilan penyemak imbas
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
Salin selepas log masuk
,

simbol yang dicampur dalam url memang kelihatan agak tidak elegan#urlJika anda mahu

kelihatan lebih baik, kemudian gunakan mod

urlhistoryTetapi: dalam mod

, kandungan sebelum menggunakan simbol

akan disertakan dalam kandungan permintaan, dan kandungan selepas simbol hash tidak akan dihantar ke pelayan hash# dalam mod

, bahagian hadapan

mestilah Selaras dengan history yang sebenarnya memulakan permintaan ke bahagian belakang URLURL seperti:

, jika bahagian belakang tidak mempunyai pemprosesan penghalaan untuk

, maka ia akan mengembalikan https://itclan.cn/fontend/id ralat /fontend/id404Jika anda ingin menyokong mod

, anda memerlukan sokongan rakan sekelas belakang Jika anda ingin menyelesaikan masalah 404 sepenuhnya, anda perlu berunding dengan rakan sekelas belakang.

kerana laluan belakang dan bahagian hadapan perlu dipadankanhistory Tambahkan sumber calon pada pelayan yang merangkumi semua situasi jika

tidak dapat memadankan mana-mana sumber statik, rumah halaman harus dikembalikan

url Jika 404 muncul, mudah untuk pengguna merasakan bahawa ini adalah pepijat

Cara menyelesaikan masalah 404 menyegarkan halaman di latar depan

Untuk menyelesaikan masalah ini: Jika anda menggunakan

sebagai perkhidmatan back-end, maka anda boleh menambah perantara dalam latar belakang

Contohnya: Node boleh menyelesaikan masalah 404 ini Nodeconnect-history-api-fallback Jika ia adalah

atau

, cari rakan sekelas belakang untuk memadankan penghalaan bahagian belakang dengan penghalaan bahagian hadapan atau gunakan java Gunakan kod perkhidmatan php mudah berikut sebagai proksi perantaraan Ngnix

, yang boleh dinamakan

Pada masa yang sama, pasang Node dan server.js middleware expressconnect-history-api-fallback untuk memulakan arahan pelaksanaan perkhidmatan bahagian belakang

node server.js

Letakkan kod dalam fail
const express = require('express');
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'));


app.listen(5005,(err)=> {
  if(!err)consle.log('服务器启动成功了')
})
Salin selepas log masuk
yang dihasilkan oleh pembungkusan bahagian hadapan ke dalam

Melalui operasi ini, anda boleh menyelesaikan masalah menyegarkan halaman dan diststatic404Pemahaman tentang. aplikasi spa satu halaman

Dua mod dalam

yang digunakan oleh bahagian hadapan kami ialah aplikasi satu halaman Keseluruhan aplikasi hanya mempunyai satu

penghala, yang boleh dilalui melalui vue-routerAtribut. diperolehrouter$routerDalam erti kata lain, keseluruhan aplikasi hanya mempunyai satu halaman lengkap Pada masa yang sama, mengklik pautan navigasi dalam halaman tidak akan memuatkan semula halaman, tetapi hanya kemas kini separa halaman

<.> Data dalam halaman kami selalunya perlu diperoleh melalui

permintaan

Projek baharu yang dibangunkan pada masa ini diasingkan dari bahagian hadapan dan belakang, dan pada dasarnya adalah aplikasi satu halamanajax

Ringkasan

Penghalaan bahagian hadapan mempunyai dua mod, satu mod

dan satu lagi mod

ialah mod lalai yang mengikuti

tidak akan dihantar ke pelayan Tidak Halaman pemuatan akan dimuatkan semula, dan mod hash, history, walaupun ia kelihatan lebih baik, tetapi untuk sokongan lengkap, pelajar bahagian belakang perlu memberikan sokongan, dan penghalaan bahagian belakang dan penghalaan bahagian hadapan perlu sepadan dengan hash# jika tidak, penggunaan Apabila anda pergi ke dalam talian dan muat semula halaman, masalah history akan munculurl

(Mempelajari perkongsian video: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang dua mod penghalaan Vue (cincang dan sejarah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menambah fungsi ke butang untuk vue Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara Menggunakan Watch di Vue Cara Menggunakan Watch di Vue Apr 07, 2025 pm 11:36 PM

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Cara merujuk fail js dengan vue.js Cara merujuk fail js dengan vue.js Apr 07, 2025 pm 11:27 PM

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page? Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page? Apr 07, 2025 pm 11:57 PM

Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.

Cara kembali ke halaman sebelumnya oleh Vue Cara kembali ke halaman sebelumnya oleh Vue Apr 07, 2025 pm 11:30 PM

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Cara Menanyakan Versi Vue Cara Menanyakan Versi Vue Apr 07, 2025 pm 11:24 PM

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.

Cara Lulus Parameter untuk Fungsi Vue Cara Lulus Parameter untuk Fungsi Vue Apr 08, 2025 am 07:36 AM

Terdapat dua cara utama untuk lulus parameter ke fungsi Vue.js: Lulus data menggunakan slot atau mengikat fungsi dengan mengikat, dan menyediakan parameter: lulus parameter menggunakan slot: lulus data dalam templat komponen, diakses dalam komponen dan digunakan sebagai parameter fungsi. Lulus parameter menggunakan mengikat mengikat: Fungsi mengikat dalam contoh Vue.js dan menyediakan parameter fungsi.

See all articles