Penjelasan terperinci tentang fungsi penghalaan dalam Vue3: melaksanakan lompatan penghalaan untuk aplikasi SPA

Vue3 ialah versi Vue terbaharu, dan fungsi penghalaannya telah mengalami perubahan besar berbanding versi Vue2. Sebagai salah satu alat penting untuk melaksanakan aplikasi satu halaman (SPA), fungsi penghalaan dalam Vue3 digunakan secara meluas. Dalam artikel ini, kami akan menerangkan fungsi penghalaan dalam Vue3 secara terperinci, termasuk lompatan penghalaan dan pelaksanaannya.

1. Pengenalan kepada fungsi penghalaan Vue3

Fungsi penghalaan dalam Vue3 terutamanya terdiri daripada dua bahagian: contoh penghalaan dan penghala. Antaranya, tika penghalaan ialah tika Penghala Vue, yang digunakan untuk menentukan laluan dan laluan lompatnya dan penghala bertanggungjawab untuk menyuntik tika penghalaan ke dalam tika Vue untuk menjadikannya berkesan dan membolehkan lompatan penghalaan.

2. Contoh penghalaan

1. Membuat tika penghalaan

Dalam Vue3, kita boleh mencipta tika penghalaan dengan memanggil fungsi Penghala Vue kod adalah seperti berikut :

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

Dalam kod di atas, fungsi createRouter() boleh menerima objek konfigurasi, termasuk dua sifat: history dan routes. Antaranya, history digunakan untuk menentukan mod penghalaan, dan routes digunakan untuk menentukan jadual penghalaan.

2. Takrif jadual penghalaan

Jadual penghalaan terdiri daripada tatasusunan objek konfigurasi penghalaan Setiap objek dalam tatasusunan mewakili definisi laluan, termasuk atribut berikut :

• path: laluan penghalaan;
• component: komponen penghalaan;
• name: nama penghalaan; 🎜 >: Menghalakan maklumat meta.
• metaDalam jadual penghalaan, kita boleh menggunakan
dan

untuk menentukan laluan penghalaan dan komponen penghalaan Kod sampel adalah seperti berikut:

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

pathPemegang tempat boleh digunakan. untuk laluan penghalaan Untuk mewakili parameter dinamik, kod sampel adalah seperti berikut: component

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

Dalam contoh di atas, titik bertindih dalam laluan penghalaan

menunjukkan bahawa laluan boleh sepadan dengan parameter dinamik Atribut

untuk menggunakan parameter dinamik sebagai komponen Sifat dihantar ke dalam komponen penghalaan.

/user/:idpropsPenghalaan bersarang

3. Dalam Vue3, kami boleh menggunakan penghalaan bersarang untuk mengatur struktur penghalaan aplikasi. Penghalaan bersarang merujuk kepada situasi di mana laluan penghalaan mengandungi berbilang peringkat Kod sampel adalah seperti berikut:

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: '/about',
          component: About
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    }
  ]
})

Dalam contoh di atas, kami menentukan komponen penghalaan bernama

di bawah laluan

dan ditambah. Ia berfungsi sebagai laluan induk untuk laluan bersarang.

Terdapat tiga sub-laluan dalam komponen, sepadan dengan laluan yang berbeza. /LayoutLayoutPengawal laluan

4. Pengadang laluan digunakan untuk melakukan beberapa operasi logik sebelum atau selepas lompatan laluan. Dalam Vue3, pengawal penghalaan terbahagi terutamanya kepada tiga kategori: pengawal global, pengawal penghalaan dan pengawal komponen.

Terdapat tiga jenis pengawal global:

: laksanakan logik sebelum lompat laluan

• beforeEach: lakukan penghalaan selepas resolusi laluan selesai Logik dilaksanakan sebelum memadankan;
• beforeResolve: Logik dilaksanakan selepas lompatan laluan.
• afterEachPengawal laluan terbahagi kepada dua jenis:

: logik dilaksanakan sebelum memasuki laluan;

• beforeEnter: sebelum meninggalkan laluan Logik yang dilaksanakan sebelum ini.
• beforeLeavePengadang komponen adalah untuk penghalaan peringkat komponen, termasuk yang berikut:

: logik dilaksanakan sebelum komponen memasuki penghalaan; 🎜>: Logik dilaksanakan sebelum komponen mengemas kini laluan;

• beforeRouteEnter: Logik dilaksanakan sebelum komponen meninggalkan laluan.
• beforeRouteUpdate3. Penghala
• beforeRouteLeaveJalur suntikan

Selepas mencipta contoh penghalaan, kita perlu menyuntiknya ke dalam contoh Vue supaya mengambil masa kesan. Dalam Vue3, kita boleh mencipta contoh Vue dengan memanggil fungsi

Kod sampel adalah seperti berikut:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

1. Dalam kod di atas, kami menggunakan fungsi
untuk mencipta tika Vue dan lulus. ia kepada kaedah

contoh Laluan

disuntik ke dalam tika Vue. createApp

Lompatan laluancreateAppuserouterDalam Vue3, kita boleh melaksanakan lompat laluan dengan memanggil kaedah

. Kaedah

menerima parameter untuk menentukan laluan penghalaan yang perlu dilompat. Kod sampel adalah seperti berikut:

2. import { RouterLink } from 'vue-router';
   
   <RouterLink to="/">Home</RouterLink>
   <RouterLink to="/about">About</RouterLink>
   <RouterLink to="/contact">Contact</RouterLink>

   Dalam contoh di atas, kami menggunakan komponen dan bukannya komponen

   dalam versi Vue2 untuk melaksanakan lompatan penghalaan. router.pushrouter.pushDi atas ialah penjelasan terperinci tentang fungsi penghalaan dalam Vue3, termasuk penggunaan kejadian penghalaan dan penghala serta pelaksanaan lompatan penghalaan. Melalui kajian artikel ini, saya percaya bahawa semua orang mempunyai pemahaman yang lebih baik tentang fungsi penghalaan dalam Vue3.

   Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi penghalaan dalam Vue3: melaksanakan lompatan penghalaan untuk aplikasi SPA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!