vue 面包屑导航组件封装

更新时间：2022年07月26日 09:08:23 作者：小解不懈

本文主要介绍了vue 面包屑导航组件封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、为什么需要面包屑？

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二、初级封装

1. 实现思路

准备页面结构和样式,需要用到字体图标在public目录下的index.html中引入cdn的字体图标资源

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

将需要外部传入的值定义为自定义属性
将外部写在标签内部的内容放置在默认插槽中

2. 代码演示

在src/components目录下新建bread-crumbs.vue文件，公用的组件放在这个目录下统一管理，文件名可自定义。

代码如下（示例）：

<template>
  <div class='bread-crumbs'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">首页</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>

在src/components目录下新建index.js文件，将封装好的全局组件进行注册

import BreadCrumbs from './bread-crumbs'

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

在main.js中注册为插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入并注册
import myUI from './components'

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

3. 使用

传入公共组件需要的值代码如下（示例）：

<template>
  <div class="home-banner">
    <bread-crumbs parentPath="/xxx" parentName="电器">空调</bread-crumbs>
  </div>
</template>

<script>

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

4. 不足

只能满足基本需求，超过二级导航后就无法使用。

三、进阶封装

1. 实现思路

参考elementUI面包屑组件代码

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

将每一个导航封装为一个组件

2. 代码演示

在上一步封装的基础上继续改进代码

代码如下（示例）：在src/component目录下新建bread-crumbs-item组件，文件名可以自定义。

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

还是在src/components目录下的index.js中注册为全局组件

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

修改BreadCrumbs.vue中代码，将导航的每一项放置在默认插槽中

<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. 使用

使用的时候，有多少个二级导航就使用几个BreadCrumbsItem 代码如下（示例）：

<template>
  <div class="home-banner">
  	<!-- 面包屑 -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">首页</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">电器</BreadCrumbsItem>
        <BreadCrumbsItem >空调</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</template>

<script>

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

4. 不足

在最后一个导航后面会有多余的一个>指示标识

四、高阶封装

1. 思路

终极版，使用render函数自己进行拼接创建。 createElement renderrender选项与h函数
指定组件显示的内容：new Vue({选项})
- el 选项，通过一个选择器找到容器，容器内容就是组件内容
- template 选项，<div>组件内容</div> 作为组件内容
- render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

2. 代码演示

修改BreadCurmbsItem组件内的代码

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

修改BreadCrumbs.vue中的代码

代码示例(如下)：

<script>
import { h } from 'vue'
export default {
  name: 'BreadCrumbs',
  render () {
    // 用法
    // 1. template 标签去除，单文件组件
    // 2. 返回值就是组件内容
    // 3. vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
    // 4. h 第一个参数 标签名字  第二个参数 标签属性对象  第三个参数 子节点
    // 需求
    // 1. 创建bread-crumbs父容器
    // 2. 获取默认插槽内容
    // 3. 去除bread-crumbs-item组件的i标签，因该由render函数来组织
    // 4. 遍历插槽中的item，得到一个动态创建的节点，最后一个item不加i标签
    // 5. 把动态创建的节点渲染再bread-crumbs标签中
    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'>
// 将scope属性去除，目的是为了样式穿透至item组件中
.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;
    // 样式的方式，不合理
    // &:last-child {
    //   display: none;
    // }
  }
}
</style>

3. 使用

这个方式封装后，让全局组件的复用性更强了，强烈推荐使用

<template>
  <div class="home-banner">
    <!-- 面包屑 -->
    <BreadCrumbs>
        <BreadCrumbsItem to="/">首页</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">电器</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx/xx">空调</BreadCrumbsItem>
        <BreadCrumbsItem >遥控器</BreadCrumbsItem>
    </BreadCrumbs>
  </div>
</template>

<script>

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

可以看到这样封装后，咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>指示标识也没有了。

到此这篇关于vue 面包屑导航组件封装的文章就介绍到这了,更多相关vue 面包屑导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Uniapp设置页面的背景图片方法代码
这篇文章主要给大家介绍了关于Uniapp设置页面的背景图片,uni-app中设置背景图有两种方式,分别是全局设置和在相应的view内设置背景,文中给出了代码示例,需要的朋友可以参考下
2024-03-03
vue-autoui自匹配webapi的UI控件的实现
这篇文章主要介绍了vue-autoui自匹配webapi的UI控件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
Vue3将虚拟节点渲染到网页初次渲染详解
这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
通过命令行生成vue项目框架的方法
本篇文章主要介绍了通过命令行生成vue项目框架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
VScode中配置ESlint+Prettier详细步骤(附图文介绍)
这篇文章主要介绍了VScode中配置ESlint+Prettier详细步骤,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-12-12
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
这篇文章主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue实现拍照或录像的示例代码
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
vue中实现弹出层动画效果的示例代码
这篇文章主要介绍了vue中怎样实现弹出层动画效果，由上而下渐渐显示，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-09-09
解决Vue+SpringBoot+Shiro跨域问题
本文将结合实例代码，解决Vue+SpringBoot+Shiro跨域问题，相信大家刚开始做都会遇到这个问题，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06