Several ways to encapsulate breadcrumb function components in Vue3

Preface
1. Why do we need breadcrumbs?
2. Primary Packaging

1. Implementation ideas
2. Code Demonstration
3. Use
4. Disadvantages

3. Advanced Packaging

1. Implementation ideas
2. Code Demonstration
3. Use
4. Disadvantages

4. High-level packaging

1. Idea
2. Code Demonstration
3. Use

5. Use JSX optimization

Summarize

Preface

Breadcrumb navigation can record the pages you have browsed, so that you can jump back to a certain page quickly. This article introduces several ways to encapsulate breadcrumb components yourself. Let's take a look at how to implement it~

1. Why do we need breadcrumbs?

The concept of breadcrumb navigation comes from the fairy tale "Hansel and Gretel". When Hansel and Gretel were walking through the forest, they accidentally got lost, but they found breadcrumbs scattered along the way, which helped them find their way home.

After reading the above introduction, I believe you have understood the usage scenarios of the breadcrumb component. Yes, that's right. It is used to record which pages we clicked on, so that we can return to a previous page.

When a web page jumps multiple times, the user may already be dizzy. As programmers, we may be able to tell where we are currently through the address bar parameters, after all, the web page is to be displayed to the user. If users use the web page without breadcrumb navigation, they may develop a resistance to it. Using breadcrumb navigation to record each page jump can solve this problem well.

2. Primary Packaging

1. Implementation ideas

Prepare page structure and style, font icons are needed

Import the font icon resources from CDN into index.html in the public directory

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" rel="external nofollow" >

Define the value that needs to be passed in from outside as a custom attribute

Place the content written externally inside the tag in the default slot

2. Code Demonstration

Create a new bread-crumbs.vue file in the src/components directory. Common components are placed in this directory for unified management, and the file name can be customized.

The code is as follows (example):

<template>
  <div class='bread-crumbs'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">Home</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="parentName" class="bread-crumbs-item">
      <RouterLink v-if="parentPath" :to="parentPath">{{parentName}}</RouterLink>
      <span v-else>{{parentName}}</span>
    </div>

    <i v-if="parentName" class="iconfont icon-angle-right"></i>

    <div class="bread-crumbs-item">
      <span>
          <slot/>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumbs',
  props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang='less'>
.bread-crumbs{
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      text-decoration: none;
      color: #666;
      transition: all .4s;
      &:hover {
        color: #27ba9b;
      }
    }
  }
  i {
    font-size: 12px;
    font-style: normal;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

Create a new index.js file in the src/components directory and register the encapsulated global components

import BreadCrumbs from './bread-crumbs'

export default {
  install (app) {
    app.component(BreadCrumbs.name, BreadCrumbs)
  }
}

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Import and register import myUI from './components'

createApp(App).use(store).use(router).use(myUI).mount('#app')

3. Use

Pass in the values required by the public component

The code is as follows (example):

<template>
  <div class="home-banner">
    <bread-crumbs parentPath="/xxx" parentName="Electrical Appliances">Air Conditioner</bread-crumbs>
  </div>
</template>

<script>

export default {
  name: 'App',
  setup() {
  }
}
</script>

4. Disadvantages

It can only meet basic needs and cannot be used beyond the second level of navigation.

3. Advanced Packaging

1. Implementation ideas

Refer to the elementUI breadcrumb component code

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >Activity Management</a></el-breadcrumb-item>
  <el-breadcrumb-item>Activity List</el-breadcrumb-item>
  <el-breadcrumb-item>Event details</el-breadcrumb-item>
</el-breadcrumb>

Encapsulate each navigation as a component

2. Code Demonstration

Continue to improve the code based on the previous step of encapsulation

The code is as follows (example):

Create a new bread-crumbs-item component in the src/component directory. The file name can be customized.

<template>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</template>
<script>
export default {
  name: 'BreadCurmbsItem',
  props: {
    to:
      type: [String, Object]
    }
  }
}
</script>

Or register it as a global component in index.js in the src/components directory

import BreadCrumbs from './bread-crumbs'
import BreadCrumbsItem from './bread-crumbs-item'

export default {
  install (app) {
    app.component(BreadCrumbs.name, BreadCrumbs)
    app.component(BreadCrumbsItem .name, BreadCrumbsItem )
  }
}

Modify the code in BreadCrumbs.vue to place each navigation item in the default slot

<template>
  <div class='bread-crumbs'>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'BreadCrumbs'
}
</script>

<style scoped lang='less'>
.bread-crumbs {
  display: flex;
  padding: 25px 10px;
  :deep(&-item) {
    a {
      text-decoration: none;
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: #27ba9b;
      }
    }
  }
  :deep(i) {
    font-style: normal;
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

3. Use

When using, use as many BreadCrumbsItem as there are secondary navigations.

The code is as follows (example):

<template>
  <div class="home-banner">
  	<!-- Breadcrumbs -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">Home</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">Electrical Appliances</BreadCrumbsItem>
        <BreadCrumbsItem >Air Conditioning</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</template>

<script>

export default {
  name: 'App',
  setup() {
  }
}
</script>

4. Disadvantages

There will be an extra > indicator after the last navigation.

4. High-level packaging

1. Idea

The ultimate version, use the render function to create the splicing yourself.

createElement

render render options and h function

Specify the content displayed by the component: new Vue({options})

The el option finds the container through a selector, and the container content is the component content
template option, <div>component content</div> as component content
The render option is a function that is passed to the createElement function (h) by default. This function is used to create the structure, and then the render function returns the rendered component content. It has a higher priority.

2. Code Demonstration

Modify the code in the BreadCurmbsItem component

<template>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
  </div>
</template>
<script>
export default {
  name: 'BreadCurmbsItem',
  props: {
    to:
      type: [String, Object]
    }
  }
}
</script>

Modify the code in BreadCrumbs.vue

Code example (below):

<script>
import { h } from 'vue'
export default {
  name: 'BreadCrumbs',
  render () {
    // Usage // 1. Remove the template tag, single-file component // 2. The return value is the component content // 3. The h function of vue2.0 is passed in, and the h function of vue3.0 is imported // 4. h The first parameter is the tag name, the second parameter is the tag attribute object, and the third parameter is the child node // Requirements // 1. Create a bread-crumbs parent container // 2. Get the default slot content // 3. Remove the i tag of the bread-crumbs-item component, which should be organized by the render function // 4. Traverse the items in the slot and get a dynamically created node. The last item does not have an i tag // 5. Render the dynamically created nodes in the bread-crumbs tag const items = this.$slots.default()
    const dymanicItems = []
    items.forEach((item, i) => {
      dymanicItems.push(item)
      if (i < (items.length - 1)) {
        dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
      }
    })
    return h('div', { class: 'bread-crumbs' }, dymanicItems)
  }
}
</script>

<style lang='less'>
// Remove the scope attribute to allow the style to penetrate into the item component.bread-crumbs {
  display: flex;
  padding: 25px 10px;
   &-item {
    a {
      text-decoration: none;
      color: #666;
      transition: all .4s;
      &:hover {
        color: #27ba9b;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
    // The style is not reasonable // &:last-child {
    // display: none;
    // }
  }
}
</style>

3. Use

This method of encapsulation makes the global components more reusable and is highly recommended.

<template>
  <div class="home-banner">
    <!-- Breadcrumbs -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">Home</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">Electrical Appliances</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx/xx">Air Conditioner</BreadCrumbsItem>
        <BreadCrumbsItem >Remote Control</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</template>

<script>

export default {
  name: 'App',
  setup() {
  }
}
</script>

It can be seen that after this encapsulation, our own encapsulated breadcrumb navigation already supports multi-level navigation. And the > indicator after the last navigation is gone.

5. Use JSX optimization

The functional code in the high-level writing method can be rewritten using jsx. The code written by jsx is more concise and clear.

export default {
  name: 'BreadCrumbs',
  render () {
    // The parameter of the render function of vue2 is the h function // The h function in vue3 is imported // createElement (tag name, tag attributes, tag sub-elements)
    // console.dir(this.$slots.default())
    // Get all the slots of the XtxBread component and fill them with component instances const items = this.$slots.default()
    const results = []
    items.forEach((item, index) => {
      results.push(item)
      // Manually generate an i icon and add it to the end of the breadcrumb item if (index < items.length - 1) {
        results.push(<i className='iconfont icon-angle-right'></i>)
      }
    })

    return <div className='bread-crumbs'>{results}</div>
  }
}

Summarize

Although the function is small, it covers a lot of knowledge points. The above codes have been tested locally.

This is the end of this article about vue3's self-encapsulated breadcrumb function component. For more relevant vue3 encapsulated breadcrumb function component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: