Bagaimana untuk menggunakan sublaluan dalam Penghala Vue?

Bagaimana untuk menggunakan sub-laluan dalam Penghala Vue?

Vue Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js, yang digunakan untuk melaksanakan fungsi penghalaan halaman hujung hadapan. Ia membolehkan kami melompat antara halaman dalam aplikasi dan menyokong penggunaan bersarang sub-laluan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan subrute dalam Penghala Vue dan menunjukkannya melalui contoh kod.

Dalam Penghala Vue, kami boleh menggunakan item konfigurasi laluan untuk menentukan peraturan penghalaan. Dalam tatasusunan laluan, sub-laluan boleh diisytiharkan bersarang. Sub-laluan merujuk kepada sekumpulan laluan sub-peringkat di bawah laluan induk, yang digunakan untuk mencapai lompatan halaman yang lebih halus.

Berikut ialah contoh kod menggunakan penghalaan anak:

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dalam kod di atas, kami mentakrifkan dua komponen Ibu Bapa dan Anak, yang sepadan dengan penghalaan ibu bapa dan penghalaan anak masing-masing. Dalam tatasusunan laluan, kami menggunakan item konfigurasi kanak-kanak untuk mengisytiharkan laluan kanak-kanak. Dalam contoh ini, laluan laluan induk ialah '/', dan laluan laluan anak ialah 'anak', sepadan dengan komponen Ibu Bapa dan Anak masing-masing.

Dalam komponen induk Induk, kita perlu menambah teg untuk memaparkan kandungan laluan anak ini ialah . Selepas menambah teg pada templat komponen Induk, komponen anak akan diberikan kepada kedudukan ini.

Berikut ialah contoh kod komponen Induk:

<!-- Parent.vue -->
<template>
  <div>
    <h2>父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

Dalam templat komponen Induk, kita boleh menambah kandungan lain, seperti tajuk. Kemudian berikan kandungan sub-laluan melalui teg Dengan cara ini, komponen yang sepadan dengan sub-laluan akan dipaparkan dalam komponen Induk.

Berikut ialah contoh kod komponen Kanak-kanak:

<!-- Child.vue -->
<template>
  <div>
    <h3>子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

Dalam templat komponen Kanak-kanak, kami boleh menyesuaikan kandungan sub-laluan. Ini hanyalah contoh mudah, anda boleh menentukan kandungan sub-rute yang lebih kompleks mengikut keperluan sebenar.

Akhir sekali, gunakan pembina VueRouter dalam main.js untuk mencipta tika penghalaan dan mengkonfigurasi peraturan penghalaan yang ditakrifkan sebelumnya kepadanya. Kemudian, masukkan contoh penghalaan dalam tika Vue, dan lekapkan tika Vue ke halaman melalui kaedah $mount.

Kini, kita boleh menjalankan kod dan melihat kesannya. Apabila laluan '/' diakses, kandungan laluan induk Induk akan dipaparkan dan kandungan laluan anak Anak akan dipaparkan pada kedudukan teg

Untuk meringkaskan, sub-laluan dalam Penghala Vue boleh ditakrifkan melalui item konfigurasi kanak-kanak dalam tatasusunan laluan. Laluan induk memaparkan kandungan laluan anak melalui teg Dalam pembangunan sebenar, sub-laluan boleh digunakan secara fleksibel mengikut keperluan untuk mencapai lompatan halaman yang lebih kompleks dan sarang komponen.

Saya harap artikel ini dapat membantu anda memahami dan menggunakan fungsi sub-routing dalam Vue Router. Jika anda mempunyai sebarang soalan atau perkongsian, sila tinggalkan di ruangan komen.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan sublaluan dalam Penghala Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!