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

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>

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>

• Edit.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit</h1>
    </div>
  </div>
</template>

Ubah suai penghala/index.js Kod

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

children:[
    {path:'/',component:xxx},
    {path:'xx',component:xxx}]

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

• index.js

  import Vue from 'vue'import VueRouter from 'vue-router'import Admin from '@/views/Admin.vue'// 导入admin子路由import Create from '@/views/admin/Create';import Edit from '@/views/admin/Edit';Vue.use(VueRouter)const routes = [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      children: [
        {
          path: 'create',
          component: Create,
        },
        {
          path: 'edit',
          component: Edit,
        }
      ]
    }]const router = new VueRouter({
    routes})export default router

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!