Purpose: Encapsulate a simple breadcrumb component suitable for two level scenarios. General steps:

  • Ready for staticshop-bread.vuecomponent
  • definepropsexposedparentPath parentNameProperties, default slots, dynamic rendering components
  • inlibrary/index.jsRegister the component and use the validation effect.

Infrastructure SRC/components/library/shop – bread. Vue

<template> <div class='shpo-bread'> <div class="shop-bread-item"> <RouterLink to="/"> home </RouterLink> </div> < I Class ="iconfont icon-angle-right"></ I >< div class="shop-bread-item"> <RouterLink to="/category/10000"> </div> < I class="iconfont icon-angle-right"></ I >< div class="shop-bread-item"> <span> </span> </div> </div> </template>  <script> export default { name: 'ShopBread' } </script> <style scoped lang='less'> .shop-bread{ display: flex; padding: 25px 10px; &-item { a { color: #666; transition: all .4s; &:hover { color: @xtxColor; } } } i { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; } } </style>Copy the code

Define props for rendering the SRC/components/library/shop – bread. Vue

<template> <div class='shop-bread'> <div class="shop-bread-item"> <RouterLink to="/"> home </RouterLink> </div> < I class="iconfont icon-angle-right"></i> <div class="shop-bread-item" v-if="parentName"> <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="shop-bread-item"> <span><slot /></span> </div> </div> </template> <script> export default { name: 'XtxBread', props: { parentName: { type: String, default: '' }, parentPath: { type: String, default: '' } } } </script>Copy the code

Registered using the SRC/components/library/index. Js

import ShopBread from './shop-bread.vue'

export default {
  install (app) {
      app.component(ShopBread.name, ShopBread)
Copy the code


  1. Encapsulate the basic breadcrumb components
  2. Support only secondary navigation, not flexible enough (no unlimited navigation)

The problems with this encapsulated breadcrumb component will be optimized in the next article