Cara menggunakan penghalaan untuk melaksanakan aplikasi SPA dalam Vue

SPA (Single Page Application) ialah seni bina aplikasi web moden, kelebihan utamanya ialah ia dapat memberikan pengalaman pengguna yang lebih baik berbanding aplikasi berbilang halaman tradisional. Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan fungsi penghalaan yang sangat baik dan boleh digunakan dengan baik untuk melaksanakan aplikasi SPA. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan aplikasi SPA dalam Vue.

Pengenalan kepada Vue Router

Vue Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js. Ia boleh disepadukan dengan baik ke dalam aplikasi Vue.js dan menyediakan beberapa API yang boleh membantu kami melaksanakan fungsi penghalaan aplikasi satu halaman. Penghala Vue bukan sahaja menyediakan mekanisme untuk melaksanakan navigasi penghalaan, tetapi juga menyediakan beberapa fungsi untuk mengendalikan parameter penghalaan, status penghalaan dan pemindahan objek, dsb.

Pasang Vue Router

Untuk menggunakan Vue Router, anda perlu memasang Vue Router terlebih dahulu. Kita boleh memasangnya melalui npm atau benang. Jalankan arahan berikut dalam tetingkap terminal:

npm install vue-router --save

atau

yarn add vue-router

Selepas pemasangan selesai, kita perlu memperkenalkan Vue Router dalam fail entri utama aplikasi Vue.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

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

Kami mula-mula memperkenalkan Vue dan VueRouter, kemudian kami memasang VueRouter ke dalam Vue. Seterusnya, kami mencipta tika penghala dan menyerahkannya kepada tika aplikasi Vue.js.

Mengkonfigurasi Laluan

Untuk menggunakan Penghala Vue, kita perlu menentukan jadual penghalaan yang akan memberitahu Penghala Vue komponen yang perlu dipaparkan untuk setiap laluan URL dalam aplikasi. Kita boleh mentakrifkan jadual penghalaan melalui tatasusunan:

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

Dalam contoh ini, kita mentakrifkan tiga peraturan penghalaan. Apabila pengguna mengakses laluan '/', komponen Laman Utama akan dipaparkan apabila pengguna mengakses laluan '/about', komponen Perihal akan dipaparkan apabila pengguna mengakses laluan '/contact', komponen Kenalan akan; dipersembahkan.

Kami boleh mengkonfigurasi jadual penghalaan ke dalam aplikasi melalui pilihan laluan contoh Penghala Vue:

const router = new VueRouter({
  routes
})

Selepas melengkapkan semua konfigurasi di atas, kami boleh menggunakan elemen Angular untuk melaksanakan paparan berbilang permohonan.

Ubah hala laluan

Kadangkala, kita perlu mengubah hala laluan URL tertentu ke laluan lain. Penghala Vue juga menyokong pengalihan laluan Melalui pengalihan, anda boleh memindahkan satu alamat URL ke alamat lain. Kita boleh mentakrifkan peraturan penghalaan ubah hala:

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home }
]

Dalam contoh ini, apabila pengguna mengakses '/', ia akan mengubah hala secara automatik ke laluan '/home' dan menjadikan komponen Home.

Penghalaan bersarang

Dalam Penghala Vue, kita boleh menggunakan penghalaan bersarang untuk melaksanakan paparan bersarang. Penghalaan bersarang bermakna laluan boleh mempunyai sub-laluan, dan setiap sub-laluan boleh mempunyai laluan dan komponennya sendiri.

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

Dalam contoh ini, kami mentakrifkan laluan induk MainLayout dan tiga laluan anak Laman Utama, Perihal dan Kenalan. Apabila pengguna mengakses laluan akar /, komponen MainLayout akan dipaparkan dan memainkan peranan sebagai "induk" dalam komponen MainLayout. Arahan <router-view> dalam komponen induk digunakan untuk memaparkan dan/atau sarang subtonton.

Laluan Dinamakan

Dalam Penghala Vue, kami boleh menentukan dan menggunakan laluan menggunakan nama untuk memudahkan pengurusan dan pemfaktoran semula aplikasi.

const routes = [
  { path: '/user/:username', name: 'user', component: User }
]

Dalam contoh ini, kami menggunakan atribut name untuk menentukan nama laluan. Menggunakan laluan yang dinamakan, kita boleh menavigasi ke laluan mengikut nama dan bukannya laluan:

<router-link :to="{ name: 'user', params: { username: 'me' }}">My Profile</router-link>

Apabila pengguna mengklik pautan My Profile, ia akan menavigasi ke laluan "Pengguna" secara automatik, melepasi parameter "saya" kepada komponen Pengguna.

Parameter penghalaan

Dalam Penghala Vue, parameter penghalaan merujuk kepada bahagian khas URL, seperti:/user/:username, di mana :username ialah parameter penghalaan. Kita boleh mengakses parameter laluan menggunakan $route.params dalam komponen.

const User = {
  template: '<div>User {{ $route.params.username }}</div>'
}

Dalam contoh ini, kami mengakses parameter laluan melalui $route.params.username untuk memaparkan komponen Pengguna. Apabila pengguna mengakses '/user/me', komponen Pengguna akan dipaparkan dan "User me" akan dipaparkan.

Pengawal Navigasi

Penghala Vue menyediakan beberapa pengawal navigasi yang boleh melakukan beberapa ujian atau operasi sebelum atau selepas lompatan laluan:

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

Dalam contoh ini, Kami mentakrifkan beforeEach dan afterEach cangkuk navigasi. beforeEachKail dilaksanakan sebelum laluan melompat dan afterEachkail dilaksanakan selepas laluan melompat. Kedua-duanya boleh menerima ke dan dari parameter, di mana parameter ke menunjukkan laluan sasaran yang akan dilompat, dan parameter dari menunjukkan laluan sumber yang akan dilompat. Dalam cangkuk beforeEach, kami boleh melakukan beberapa semakan kebenaran atau logik kawalan lain.

Ringkasan

Vue Router ialah pengurus penghalaan yang fleksibel dan mudah digunakan yang boleh melaksanakan aplikasi SPA dengan baik. Dalam artikel ini, kami memperkenalkan penggunaan asas Penghala Vue, termasuk pemasangan, konfigurasi laluan, ubah hala laluan, laluan bersarang, laluan bernama, parameter laluan dan pengawal navigasi. Ini adalah penggunaan biasa Vue Router dan boleh membantu kami membina aplikasi satu halaman dengan lebih baik.

Jika anda ingin mengetahui lebih lanjut tentang Vue Router, sila rujuk dokumentasi rasmi Vue Router.

Atas ialah kandungan terperinci Cara menggunakan penghalaan untuk melaksanakan aplikasi SPA dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!