vue面包屑组件的封装方法 vue面包屑组件的封装方法

vue中自己封装面包屑组件，供大家参考，具体内容如下
要实现效果

文章图片

前言很多电商类产品都需要实现面包屑导航，用来优化用户体验
【vue面包屑组件的封装方法】一、初级面包屑封装组件
1.封装基础结构组件 Bread.vue

.xtx-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; }}

2.定义 props 暴露 parentPath parentName 属性，默认插槽，动态渲染组件

首页//用props接收数据props: {parentName: {type: String,default: ''},parentPath: {type: String,default: ''}}

3.注册组件，使用验证效果

import Bread from './Bread'export default {install (app) {// Vue2中，参数是Vue构造函数// Vue3中，参数是根组件的实例对象// 配置一个全局组件app.component(Bread.name, Bread)}}

4.使用组件

飞织系列飞织系列//parentPath去掉后不能实现跳转

二、高级封装无限极导航
参考element-ui的面包屑组件：

首页活动管理活动列表活动详情

1.封装基础结构组件 BrendItem.vue

//使用时

2.封装 Brend.vue

.xtx-bread {display: flex; padding: 25px 10px; :deep(&-item) {a {color: #666; transition: all 0.4s; &:hover {color: @xtxColor; }}}:deep(i) {font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; }}

3.注册

import BreadItemfrom './BreadItem'import Breadfrom './Bread'export default {install (app) {// Vue2中，参数是Vue构造函数// Vue3中，参数是根组件的实例对象// 配置一个全局组件app.component(Bread.name,Bread)app.component(BreadItem.name, BreadItem)}}

4.使用