Cara melekapkan sub-laluan yang diperkenalkan dalam vue3.0

Vue3.0 ialah versi terkini rangka kerja Vue.js, yang membawakan banyak ciri baharu dan prestasi yang lebih baik. Salah satu perubahan terbesar melibatkan penambahbaikan pada penghalaan. Dalam Vue3.0, kita boleh mentakrifkan sub-laluan dengan mudah, mari kita lihat cara untuk melekapkannya.

Pertama, kita perlu mencipta aplikasi Vue3.0 dan memasang Vue Router4.0. Arahan pemasangan adalah seperti berikut:

npm install vue-router@4.0.0-beta.7

Kita perlu mencipta penghala dalam komponen akar dan memasangnya pada contoh Vue. Berikut ialah beberapa contoh kod mudah:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ './components/User.vue'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "user-profile" */ './components/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import(/* webpackChunkName: "user-posts" */ './components/UserPosts.vue')
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);

app.use(router);

app.mount('#app');

Di sini kami telah mencipta aplikasi dengan tiga laluan: halaman utama (Laman Utama), halaman tentang (Perihal) dan halaman pengguna (Pengguna).

Perasan tak? Kami menambahkan sub-laluan dalam konfigurasi penghalaan halaman pengguna Sub-laluan boleh ditambahkan pada children laluan induk seperti ini. Dalam contoh ini, kami menambah dua sub-laluan: '' dan 'posts'.

Kami kini perlu menambah slot laluan kanak-kanak dalam templat komponen halaman pengguna. Berikut ialah contoh mudah yang menunjukkan cara menambah slot untuk laluan kanak-kanak:

<template>
  <div>
    <h2>User</h2>
    <router-view />
  </div>
</template>

Perasan? Nama slot kami kosong. Ini ialah ciri baharu yang disediakan oleh Vue Router 4.0, yang secara automatik akan memadankan sub-laluan untuk kami dan memasukkannya ke dalam slot yang sepadan.

Akhir sekali, kami perlu menambah slot kami sendiri dalam templat komponen laluan kanak-kanak. Berikut ialah contoh mudah:

<template>
  <div>
    <h3>User Profile</h3>
  </div>
</template>

Komponen UserProfile.vue dalam contoh ini ialah komponen yang kami tambahkan pada sub-laluan halaman pengguna.

Kini, kami telah berjaya memasang sub-router ke dalam aplikasi Vue kami. Ciri ini membolehkan kami menambah berbilang sub-laluan dalam komponen, menjadikan aplikasi kami lebih fleksibel dan berkuasa.

Atas ialah kandungan terperinci Cara melekapkan sub-laluan yang diperkenalkan dalam vue3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!