Asas pembangunan VUE3: menggunakan pemalam Vue.js untuk merangkum komponen serbuk roti

Breadcrumb ialah kaedah navigasi yang biasa digunakan Ia bukan sahaja membolehkan pengguna memahami lokasi mereka, tetapi juga menyediakan pengguna dengan fungsi untuk kembali ke menu sebelumnya. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen serbuk roti.

1. Penyediaan

Sebelum menggunakan pemalam Vue.js untuk merangkum komponen serbuk roti, anda perlu memasang Vue.js dan Vue CLI, dan memperkenalkan Penghala Vue ke dalam projek.

2. Buat pemalam serbuk roti

1. Buat fail pemalam

Pertama, buat fail pemalam untuk merangkum serbuk roti komponen dalam projek, contohnya "breadcrumb.js".

2. Edit kod pemalam

Dalam "breadcrumb.js", kita boleh menggunakan kaedah Vue.extend() untuk mencipta komponen breadcrumb:

import Vue from 'vue'
import Breadcrumb from './Breadcrumb.vue'

const BreadcrumbConstructor = Vue.extend(Breadcrumb)

const breadcrumb = new BreadcrumbConstructor({
  el: document.createElement('div')
})

document.body.appendChild(breadcrumb.$el)

export default breadcrumb

Dalam kod di atas, kami mentakrifkan pembina komponen Vue bernama BreadcrumbConstructor dan membungkusnya menjadi komponen boleh guna semula melalui kaedah Vue.extend().

3. Mentakrifkan komponen serbuk roti

Kini, kita boleh mencipta fail "Breadcrumb.vue" yang akan mentakrifkan komponen serbuk roti kita. Berikut ialah contoh komponen serbuk roti asas:

<template>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" v-for="(item, index) in items" :key="index">
        <router-link :to="item.to">{{ item.label }}</router-link>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: ['items']
}
</script>

<style>
/* 样式可根据需求进行调整 */
</style>

Dalam kod di atas, kami menggunakan komponen pautan penghala daripada Penghala Vue untuk menambah pautan navigasi pada setiap item serbuk roti. Pada masa yang sama, kami juga menentukan prop bernama item untuk menghantar data serbuk roti secara dinamik.

4. Daftar Plugin

Akhir sekali, kami perlu mendaftarkan pemalam serbuk roti ke dalam projek Vue kami seperti ini:

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

Sekarang, kami Anda boleh menggunakan Kaedah Vue.use() dalam projek untuk memasang pemalam serbuk roti. Dalam komponen yang perlu menggunakan serbuk roti, kita boleh memanggil pemalam seperti ini:

<breadcrumb :items="breadcrumbItems"/>

Dalam kod di atas, kami menghantar data yang diperlukan untuk serbuk roti ke dalam komponen serbuk roti sebagai prop.

3. Gunakan pemalam serbuk roti

Sekarang kami telah berjaya merangkumkan pemalam komponen serbuk roti, kami boleh menggunakannya dalam projek.

1. Buat Halaman

Kita boleh mencipta halaman asas untuk menguji kesan komponen serbuk roti. Contohnya:

<template>
  <div>
    <h3>页面一</h3>
    <ul>
      <li><router-link to="/page1/subpage1">子页面一</router-link></li>
      <li><router-link to="/page1/subpage2">子页面二</router-link></li>
    </ul>
  </div>
</template>

Dalam kod di atas, kami mencipta halaman bernama "page1" yang mengandungi dua subhalaman. Seterusnya, kami akan memaparkan hubungan hierarki halaman dalam serbuk roti.

2. Konfigurasikan penghalaan

Dalam Penghala Vue, kami boleh menjana serbuk roti secara automatik dengan mengkonfigurasi penghalaan. Contohnya, dalam fail "router.js", kita boleh mentakrifkan laluan seperti ini:

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './views/Page1.vue'
import Subpage1 from './views/Subpage1.vue'
import Subpage2 from './views/Subpage2.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/page1',
      component: Page1,
      children: [
        {
          path: 'subpage1',
          component: Subpage1,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面一', to: '/page1/subpage1' }
            ]
          }
        },
        {
          path: 'subpage2',
          component: Subpage2,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面二', to: '/page1/subpage2' }
            ]
          }
        }
      ]
    }
  ]
})

Dalam kod di atas, kami menggunakan medan "meta" untuk mentakrifkan item serbuk roti dan menyimpannya dalam laluan . Dalam laluan kanak-kanak, kita boleh menambah lebih banyak item serbuk roti dengan menyarang medan "meta".

3. Menunjukkan serbuk roti

Kini, kita boleh menunjukkan serbuk roti pada halaman. Kita boleh mendapatkan item serbuk roti halaman semasa dengan cara berikut:

computed: {
  breadcrumbItems() {
    let crumbs = []

    let matched = this.$route.matched
    matched.forEach(route => {
      if (route.meta && route.meta.breadcrumb) {
        crumbs.push(...route.meta.breadcrumb)
      }
    })

    return crumbs
  }
}

Dalam kod di atas, kita mendapat semua item laluan dipadankan dengan halaman dengan merentasi atribut $route.matched. Kami kemudian menyemak medan meta setiap item laluan dan menambah item serbuk roti yang terkandung di dalamnya pada tatasusunan serbuk. Akhir sekali, kami mengembalikan susunan serbuk untuk paparan dalam komponen serbuk roti.

4. Paparan kesan

Selepas melengkapkan konfigurasi di atas, kami boleh memaparkan serbuk roti pada halaman. Berikut ialah kesan serbuk roti halaman "subpage1":

页面一 / 子页面一

Apabila pengguna mengklik pada item serbuk roti, kami juga boleh menggunakan fungsi lompat laluan Vue Router untuk membolehkan pengguna kembali dengan cepat ke sebelumnya. menu.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen serbuk roti. Melalui enkapsulasi, kami boleh menganggap komponen serbuk roti sebagai modul bebas, menjadikannya lebih mudah untuk diurus dan digunakan semula sepanjang projek. Pada masa yang sama, komponen serbuk roti juga menyediakan pengguna dengan navigasi yang mudah dan fungsi pemulangan, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Asas pembangunan VUE3: menggunakan pemalam Vue.js untuk merangkum komponen serbuk roti. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!