VUE3 development basics: using Vue.js plug-in to encapsulate breadcrumb components

Breadcrumb is a commonly used navigation method. It not only allows users to understand their location, but also provides users with the function of returning to the upper menu. This article will introduce how to use the Vue.js plug-in to encapsulate the breadcrumb component.

1. Preparation

Before using the Vue.js plug-in to encapsulate the breadcrumb component, you need to install Vue.js and Vue CLI, and introduce Vue Router into the project.

2. Create a breadcrumb plug-in

1. Create a plug-in file

First, create a plug-in file for encapsulating the breadcrumb component in the project, for example "breadcrumb.js".

2. Edit plug-in code

In "breadcrumb.js", we can use the Vue.extend() method to create a breadcrumb component:

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

In the above code, we define a Vue component constructor named BreadcrumbConstructor and wrap it into a reusable component through the Vue.extend() method.

3. Define Breadcrumb Component

Now, we can create a "Breadcrumb.vue" file that defines our breadcrumb component. Here is a basic breadcrumb component example:

<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>

In the above code, we use the router-link component from Vue Router to add a navigation link to each breadcrumb item. At the same time, we also defined a prop named items for dynamically passing in breadcrumb data.

4. Register the plugin

Finally, we need to register the breadcrumb plugin into our Vue project like this:

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

Now, we You can use the Vue.use() method in the project to install the breadcrumb plug-in. In a component that needs to use breadcrumbs, we can call the plug-in like this:

<breadcrumb :items="breadcrumbItems"/>

In the above code, we pass the data required for breadcrumbs into the breadcrumb component as props.

3. Use the breadcrumb plug-in

Now that we have successfully encapsulated a breadcrumb component plug-in, we can use it in the project.

1. Create page

We can create a basic page to test the effect of the breadcrumb component. For example:

<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>

In the above code, we create a page named "page1" which contains two subpages. Next, we will display the hierarchical relationship of the page in the breadcrumbs.

2. Configuring routing

In Vue Router, we can automatically generate breadcrumbs by configuring routing. For example, in the "router.js" file, we can define the route like this:

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' }
            ]
          }
        }
      ]
    }
  ]
})

In the above code, we use the "meta" field to define the breadcrumb item and store it in the route. In child routes, we can add more breadcrumb items by nesting "meta" fields.

3. Display Breadcrumbs

Now, we can display breadcrumbs on the page. We can get the breadcrumb items of the current page in the following way:

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
  }
}

In the above code, we get all the route items matched by the page by traversing the $route.matched attribute. We then check the meta field of each route item and add the breadcrumb items it contains to the crumbs array. Finally, we return the crumbs array for display in the breadcrumbs component.

4. Effect Display

After completing the above configuration, we can display breadcrumbs on the page. The following is the breadcrumb effect of the "subpage1" page:

页面一 / 子页面一

When the user clicks on the breadcrumb item, we can also use the routing jump function of Vue Router to allow the user to quickly return to the previous menu.

4. Summary

In this article, we introduced how to use the Vue.js plug-in to encapsulate the breadcrumb component. Through encapsulation, we can treat the breadcrumb component as an independent module, making it easier to manage and reuse throughout the project. At the same time, the breadcrumb component also provides users with convenient navigation and return functions, improving user experience.

The above is the detailed content of VUE3 development basics: using Vue.js plug-in to encapsulate breadcrumb components. For more information, please follow other related articles on the PHP Chinese website!