Bagaimana untuk mengaktifkan laluan induk dalam sub-laluan vue

Vue ialah rangka kerja JavaScript yang popular untuk mencipta antara muka web dinamik. Ia menyediakan beberapa ciri berguna seperti komponenisasi, penghalaan, dll.

Dalam Vue, penghalaan ialah ciri yang sangat berguna. Penghala Vue ialah pengurus penghalaan rasmi Vue.js Ia disepadukan secara mendalam dengan teras Vue.js dan boleh berfungsi dengan mudah dengan perpustakaan atau pemalam pihak ketiga yang lain.

Dalam Penghala Vue, penghalaan terdiri daripada objek penghalaan dan komponen yang sepadan. Dalam perkembangan sebenar, kadangkala kita perlu mengaktifkan laluan induk dalam laluan kanak-kanak untuk mencapai navigasi halaman yang lebih fleksibel.

Dalam artikel ini, kami akan memperkenalkan cara mengaktifkan laluan induk menggunakan laluan anak Vue Router.

1. Tetapkan sub-laluan dalam laluan induk

Mula-mula, kita perlu mentakrifkan sub-laluan dalam laluan induk. Kita boleh menggunakan fungsi sub-laluan Vue Router untuk mencapai ini. Contohnya:

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

Dalam kod di atas, kami mentakrifkan laluan induk '/induk' yang komponennya ialah Induk. Dalam Induk, kami mentakrifkan sub-laluan 'anak' yang komponennya ialah Kanak-kanak. Kini, kami telah menyediakan laluan kanak-kanak dalam laluan induk.

2. Tentukan jalan keluar sub-laluan dalam laluan induk

Seterusnya, kita perlu menetapkan jalan keluar sub-laluan dalam komponen induk. Dalam Vue, komponen boleh bersarang dalam komponen lain, dan kandungan subkomponen boleh dipaparkan dalam komponen induk dalam bentuk slot. Kami boleh memaparkan kandungan laluan kanak-kanak dengan menetapkan slot dalam komponen induk.

Sebagai contoh, kita boleh menambah teg dalam templat komponen induk untuk memaparkan kandungan laluan anak:

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>

3. Aktifkan induk dalam Laluan laluan kanak-kanak

Sekarang kita telah menentukan laluan anak dalam laluan induk dan menetapkan jalan keluar laluan anak dalam komponen induk, langkah seterusnya ialah mengaktifkan laluan induk dalam anak laluan.

Untuk mengaktifkan laluan induk, kita boleh menggunakan kaedah $router.push() dalam komponen laluan anak untuk melompat ke laluan laluan induk. Contohnya:

// child.vue
export default {
  methods: {
    goParent() {
      this.$router.push('/parent')
    }
  }
}

Dalam contoh ini, kami mentakrifkan kaedah goParent dalam komponen laluan kanak-kanak. Apabila memanggil kaedah goParent, kami menggunakan kaedah $router.push() untuk melompat ke laluan laluan induk '/parent'.

Dengan cara ini, kita boleh mencapai kesan mengaktifkan laluan induk dalam laluan anak.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan laluan anak untuk mengaktifkan laluan induk dalam Penghala Vue. Langkah khusus adalah seperti berikut:

1. Tentukan laluan anak dalam laluan induk
2. Tetapkan jalan keluar laluan anak dalam komponen induk
3. Gunakan $router .tolak dalam kaedah laluan anak () untuk melompat ke laluan laluan induk

Melalui langkah di atas, kita boleh mencapai kesan mengaktifkan laluan induk dalam laluan anak dengan mudah, dengan itu menguruskan navigasi halaman dengan lebih fleksibel.

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