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

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: [...]
})

,

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('服务器启动成功了')
})

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!