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

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
  }
]

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

menunjukkan bahawa laluan boleh sepadan dengan parameter dinamik Atribut

/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
        }
      ]
    }
  ]
})

Salin selepas log masuk

di bawah laluan

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.

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

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

• 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

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

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

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

disuntik ke dalam tika Vue. createApp

Lompatan laluancreateAppuserouterDalam Vue3, kita boleh melaksanakan lompat laluan dengan memanggil 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>

   Salin selepas log masuk
   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!