Bagaimana untuk menulis penghalaan statik vue

Vue ialah rangka kerja JavaScript popular yang menyediakan rangka kerja yang fleksibel untuk membina aplikasi web interaktif, dinamik dan berskala. Vue Router ialah pemalam pengurusan laluan rasmi untuk Vue.js, yang membolehkan anda memetakan komponen ke laluan, membolehkan pembangunan aplikasi satu halaman (SPA).

Penghala Vue menyokong dua mod penghalaan: mod sejarah dan mod cincang. Penghalaan statik ialah sejenis penghalaan, yang merupakan tambahan kepada penghalaan dinamik dalam Penghala Vue. Penghalaan statik membolehkan anda memetakan laluan URL ke komponen tertentu, ia tidak mengandungi parameter dinamik.

Jadi, bagaimana untuk menentukan penghalaan statik dalam aplikasi Vue?

1. Buat fail laluan

Mula-mula, anda perlu mencipta direktori penghala dalam projek Vue anda. Dalam direktori ini, cipta fail router.js untuk menyimpan konfigurasi penghalaan anda.

2. Import Vue dan Vue Router

Pada permulaan fail, anda perlu mengimport Vue dan Vue Router. Berikut ialah contoh kod yang mengimport Vue dan Vue Router:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

3. Membuat senarai laluan

Seterusnya, anda perlu mencipta tika penghala yang mengandungi semua laluan statik. Senarai laluan biasa sepatutnya kelihatan seperti ini:

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

Dalam kod ini, kami mentakrifkan tiga laluan statik: /home, /about dan /contact. Setiap laluan menghala ke komponen berbeza, yang perlu diimport apabila ditakrifkan.

4. Cipta contoh Penghala Vue

Setelah anda membuat senarai laluan anda, anda perlu membuat seketika melalui Penghala Vue. Ini dilakukan dengan kod berikut:

const router = new VueRouter({
  routes
});

Dalam kod ini kami menentukan senarai laluan laluan kami sebagai parameter dan konfigurasi penghalaan untuk contoh VueRouter dibuat.

5. Suntikan contoh laluan ke dalam contoh akar Vue

Sekarang kita perlu memastikan aplikasi Vue kami dikaitkan dengan Penghala Vue. Dalam fail main.js anda, daftarkan tika laluan pada tika akar Vue seperti ini:

import Vue from 'vue'
import App from './App.vue'
import router from './router.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Kini laluan anda telah berjaya disepadukan ke dalam aplikasi Vue anda. Cuba akses mana-mana laluan statik dalam aplikasi anda dan anda akan melihat komponen halaman laluan dimuatkan dengan betul.

Ringkasan

Artikel ini memperkenalkan anda cara untuk menentukan laluan statik dalam aplikasi Vue. Menentukan laluan statik dalam Vue membolehkan anda memetakan laluan URL dengan mudah kepada komponen tertentu, yang merupakan pelengkap kepada pemalam pengurusan laluan Vue Router. Jika anda ingin mengetahui lebih lanjut mengenai Penghala Vue, sila rujuk dokumentasi rasmi.

Atas ialah kandungan terperinci Bagaimana untuk menulis penghalaan statik vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!