Rumah > hujung hadapan web > View.js > Penjelasan terperinci tentang cara membuat sub-laluan Vue-router (laluan bersarang)

Penjelasan terperinci tentang cara membuat sub-laluan Vue-router (laluan bersarang)

藏色散人
Lepaskan: 2022-08-10 10:49:19
ke hadapan
2091 orang telah melayarinya

Dalam pembangunan antara muka aplikasi, ia biasanya terdiri daripada berbilang lapisan komponen bersarang. Tetapi apabila bilangan halaman bertambah, jika anda memasukkan semua halaman ke dalam tatasusunan routes, ia akan kelihatan tidak kemas dan anda tidak akan dapat menentukan halaman mana yang berkaitan. Dengan bantuan vue-router, fungsi penghalaan bersarang disediakan, membolehkan kami menyusun halaman berkaitan bersama-sama. [Cadangan berkaitan: tutorial video vue.js]

Tujuan percubaan

Dalam projek pusat beli-belah kami, halaman pengurusan bahagian belakang Admin melibatkan banyak halaman operasi, seperti :

  • /admin Halaman Utama
  • /admin/create Cipta Mesej Baharu
  • /admin/edit Edit Mesej

Mari kita lalui Laluan bersarang untuk mengaturnya bersama-sama.

Buat halaman Pentadbiran

Buat Admin.vue di bawah src/views, dan buat direktori pentadbir untuk menyimpan sub-halaman pentadbir (apabila menggunakan sub-router vue-router, anda perlu menambahkannya dalam Komponen induk menggunakan router-view pemegang tempat)

  • Admin.vue

<template>
  <div class="title">
    <h1>{{ msg }}</h1>
    <!-- 路由插槽 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home",

  data() {
    return {
      msg: "This is the Admin Page",
    };
  },
};
</script>

<style scoped>
</style>
Salin selepas log masuk

untuk mencipta subhalaman

dalam src/ Cipta direktori pentadbir di bawah paparan untuk menyimpan subhalaman pentadbir Cipta Cipta.vue dan Edit.vue dalam direktori pentadbir untuk melaksanakan /create Cipta produk baharu /edit Edit maklumat produk

  • <. 🎜>Create.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Create</h1>
    </div>
  </div>
</template>
Salin selepas log masuk
  • Edit.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit</h1>
    </div>
  </div>
</template>
Salin selepas log masuk
Ubah suai penghala/index.js Kod

menambah sub-laluan Sub-laluan ditulis dengan menambahkan medan kanak-kanak pada konfigurasi penghalaan asal.

children:[
    {path:&#39;/&#39;,component:xxx},
    {path:&#39;xx&#39;,component:xxx}]
Salin selepas log masuk

Nota: Jangan tambah / pada laluan dalam kanak-kanak Menambah ia bermakna ia adalah laluan dalam direktori akar.

  • index.js

    import Vue from &#39;vue&#39;import VueRouter from &#39;vue-router&#39;import Admin from &#39;@/views/Admin.vue&#39;// 导入admin子路由import Create from &#39;@/views/admin/Create&#39;;import Edit from &#39;@/views/admin/Edit&#39;;Vue.use(VueRouter)const routes = [
      {
        path: &#39;/admin&#39;,
        name: &#39;Admin&#39;,
        component: Admin,
        children: [
          {
            path: &#39;create&#39;,
            component: Create,
          },
          {
            path: &#39;edit&#39;,
            component: Edit,
          }
        ]
      }]const router = new VueRouter({
      routes})export default router
    Salin selepas log masuk
    Kini sub-router Vue-router (laluan bersarang) dicipta

    Dalam pembangunan antara muka aplikasi, ia biasanya terdiri daripada berbilang lapisan komponen bersarang. Tetapi apabila bilangan halaman bertambah, jika anda memasukkan semua halaman ke dalam tatasusunan

    , ia akan kelihatan tidak kemas dan anda tidak akan dapat menentukan halaman mana yang berkaitan. Dengan bantuan routes, fungsi penghalaan bersarang disediakan, membolehkan kami menyusun halaman berkaitan bersama-sama. vue-router

    Atas ialah kandungan terperinci Penjelasan terperinci tentang cara membuat sub-laluan Vue-router (laluan bersarang). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
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