Dua mod penghalaan dalam vue dan prinsip pelaksanaannya

Vue.js ialah rangka kerja bahagian hadapan yang popular yang membolehkan pembangunan aplikasi satu halaman (SPA) melalui modul pengurusan penghalaan yang sangat baik. Modul pengurusan penghalaan Vue (Penghala Vue) mempunyai dua mod: mod Sejarah dan mod Hash. Dalam artikel ini, kami akan memperincikan cara kedua-dua corak ini dilaksanakan dan cara menggunakannya dalam Vue.

1. Konsep mod penghalaan

Dalam pembangunan aplikasi berbilang halaman tradisional, setiap halaman mempunyai alamat URLnya sendiri dan pengguna akan meminta halaman yang berbeza apabila mengakses alamat URL yang berbeza. Dalam aplikasi satu halaman, semua halaman dipaparkan dalam halaman HTML yang sama, dan lompatan pengguna tidak akan menyebabkan halaman dimuat semula, tetapi halaman itu akan ditukar melalui JavaScript. Dalam proses penukaran halaman, modul pengurusan penghalaan Vue memainkan peranan penting.

Mod penghalaan merujuk kepada kaedah yang digunakan oleh alamat URL semasa penghantaran. Mengikut perbezaannya, kita boleh membahagikan mod penghalaan kepada dua jenis: Mod Penghalaan berasaskan Hash dan mod Penghalaan berasaskan Sejarah.

2. Mod cincang

Mod cincang ialah mod penghalaan lalai Penghala Vue, dan prinsip pelaksanaannya sangat mudah. Cincang merujuk kepada tanda # dalam URL, yang merupakan titik utama yang sering kita lihat.

Dalam mod cincang, tanda # dalam URL diikuti dengan laluan halaman, seperti http://www.example.com/#/home, di mana /#/home ialah laluan bagi halaman tersebut. Apabila pengguna melompat ke halaman, Penghala Vue akan memaparkan laluan halaman baharu dalam URL dengan menukar bahagian cincang, dengan itu merealisasikan penukaran halaman tidak akan mencetuskan pemuatan semula halaman, tetapi melalui peralihan laluan.

Kelebihan menggunakan mod cincang ialah ia dapat mengelakkan pertindihan URL, kerana bahagian cincang tidak akan dihantar ke pelayan, tetapi akan dihidupkan pada bahagian hadapan. Walau bagaimanapun, ini juga membawa beberapa kesan sampingan, seperti menjejaskan SEO dalam enjin carian dan menyebabkan URL bukan standard.

3. Mod Sejarah

Mod sejarah menggunakan API dalam HTML5, yang menggunakan API window.history.pushState, API window.history.replaceState dan acara popstate. Dalam mod ini, Penghala Vue akan menambah URL halaman semasa pada tindanan sejarah dan melaksanakan penukaran laluan dengan mengendalikan tindanan. Apabila pengguna mengklik butang belakang penyemak imbas, Vue Router mendengar acara popstate melalui mekanisme mendengar acara dan kembali ke alamat URL sebelumnya. Berikut ialah contoh kod:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Perlu diperhatikan di sini bahawa jika anda memilih untuk menggunakan mod sejarah, anda perlu menetapkan konfigurasi pelayan dengan sewajarnya. Kerana dalam mod ini, apabila URL yang diakses bukan laluan ke sumber statik pada pelayan, ralat 404 akan dikembalikan.

4. Menukar mod penghalaan

Apabila menggunakan Penghala Vue untuk membangunkan aplikasi satu halaman, kita boleh menukar mod penghalaan melalui dua kaedah berikut:

1 atribut mod dalam modul penghalaan. Kod sampel adalah seperti berikut:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. Dilaksanakan dengan menetapkan atribut historyApiFallback dalam fail vue.config.js apabila projek dibina. Berikut ialah contoh kod:

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

Perlu diperhatikan di sini bahawa apabila menetapkan mod penghalaan, ia perlu diuji dan disahkan dalam persekitaran pelayan untuk memastikan fungsi penghalaan boleh beroperasi secara normal.

5. Ringkasan

Penghala Vue ialah bahagian penting Vue.js dan boleh merealisasikan pengurusan penghalaan bahagian hadapan bagi aplikasi satu halaman. Mengikut kaedah yang digunakan dalam proses penghantaran alamat URL, ia dibahagikan kepada dua jenis: mod cincang dan mod sejarah Masing-masing mempunyai kelebihan dan kekurangannya sendiri, dan pembangun perlu memilih mengikut keperluan sebenar. Apabila menggunakan Penghala Vue untuk pembangunan aplikasi satu halaman, anda perlu menetapkan mod penghalaan dengan sewajarnya dan menguji serta mengesahkannya dalam persekitaran pelayan untuk memastikan fungsi penghalaan boleh berjalan dengan normal.

Atas ialah kandungan terperinci Dua mod penghalaan dalam vue dan prinsip pelaksanaannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!