Rumah > hujung hadapan web > View.js > Bagaimana untuk menggunakan sublaluan dalam Penghala Vue?

Bagaimana untuk menggunakan sublaluan dalam Penghala Vue?

PHPz
Lepaskan: 2023-07-21 19:54:22
asal
2140 orang telah melayarinya

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

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

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan