Bagaimana untuk memaparkan laluan kanak-kanak dalam laluan induk dalam vue

Vue.js ialah rangka kerja JavaScript moden untuk membina aplikasi web satu halaman. Ia menyediakan beberapa ciri berguna seperti penghalaan. Menggunakan Penghala Vue kami boleh mengurus navigasi dan keadaan dengan mudah dalam aplikasi kami.

Dalam penghala Vue, laluan disusun menjadi struktur pokok. Kami mencipta laluan induk dan beberapa laluan kanak-kanak dan kemudian mengumpulkannya bersama-sama. Dengan cara ini kita boleh menyusun bahagian halaman yang berbeza bersama-sama dan memaparkannya pada halaman yang berbeza dalam aplikasi utama.

Secara umumnya, laluan kanak-kanak tidak akan dipaparkan dalam laluan induk. Sebaliknya, kami menggabungkannya bersama-sama dan akhirnya menjadikannya ke laluan akar aplikasi utama. Proses ini boleh dicapai melalui ciri "pandangan bernama" penghalaan Vue.

Named Views ialah ciri Penghala Vue yang membolehkan kami memaparkan berbilang paparan dalam satu komponen yang dihalakan. Dalam kes ini, setiap paparan mempunyai nama yang unik dan boleh digunakan dalam komponen induk.

Menggunakan paparan bernama, kami boleh menjadikan komponen penghalaan anak pada kedudukan tertentu dalam komponen penghalaan induk. Lokasi ini dikenal pasti dengan teg paparan bernama dengan nama yang sama.

Sebagai contoh, katakan kita mempunyai laluan induk dengan tiga laluan anak: Rumah, Perihal, Kenalan. Kita boleh menggabungkannya bersama-sama menggunakan kod berikut:

<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>

    <main>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view name="contact"></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  components: {}
}
</script>

Dalam kod di atas, kami telah menggunakan tiga teg paparan bernama dan menamakannya "home", "about" dan "contact" ". Nama ini boleh dihantar kepada komponen kanak-kanak menggunakan prop dan digunakan dalam komponen kanak-kanak.

Kemudian, dalam komponen anak kita, kita boleh menggunakan objek konfigurasi laluan untuk menentukan komponen mana yang harus dipaparkan dalam paparan bernama. Contohnya:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeComponent,
        home: SidebarComponent
      }
    },
    {
      path: '/about',
      components: {
        default: AboutComponent,
        about: SidebarComponent
      }
    },
    {
      path: '/contact',
      components: {
        default: ContactComponent,
        contact: SidebarComponent
      }
    }
  ]
})

Dalam kod di atas, kami menetapkan paparan bernama untuk setiap laluan kanak-kanak. Sebagai contoh, dalam laluan "rumah", kami menggunakan komponen "bar sisi" dan meletakkannya dalam paparan bernama "rumah". Begitu juga, kami menggunakannya dalam laluan "mengenai" dan "hubungi" dan meletakkannya dalam paparan bernama respons.

Ringkasnya, menggunakan penghala Vue.js, kami boleh mengurus navigasi dan keadaan dengan mudah dalam aplikasi kami. Melalui penggunaan paparan bernama, kita boleh menjadikan komponen penghalaan anak di lokasi tertentu komponen penghalaan induk. Ini membolehkan kami membuat aplikasi satu halaman yang kompleks dan mengurusnya dengan cara yang jelas dan teratur.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan laluan kanak-kanak dalam laluan induk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!