通用后台管理---面包屑数据处理

面包屑数据处理

实现存在三点
1 默认存在首页
2 当进行其他页面点击是，面包屑部分会增加
3 当选择已有数据的时候，header部分的数据不会重复添加

此时要进行代码编写需要用到两个页面，甚至是三个页面实现同一份数据的共享——vuex

具体实现

1.在commonHeader 组件进行引入面包屑组件

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

2. 在路由组件进行相关配置

export default{
    state:{
        //初始状态 ，默认展开，控制菜单收起还是展开
        isCollapse:false ,
        // 面包屑的数据
        tabsList:[
            // 此时默认数据
            {
                path: "/",
                name: "home",
                label: "首页",
                icon: "s-home",
                url: "Home/Home",
              },
        ]
    },
    mutations:{
        // 用来定义改变state的方法 同步状态
        // 此时的state就是接收的上面的
        CollapseManu(state){
            // 对原先的状态进行取反
            state.isCollapse = !state.isCollapse
        },

        // 更新面包屑数据
        selectMenu(state,val){
            // 当左侧进行点击其他页面时，就会获取到当前点击页面的信息
            // console.log(val,'val');

            // 基本的逻辑
            // 1 判断添加的数据是否为首页 ,如果是home 不进行任何操作
            if(val.name !== 'home'){ // 此时数据不是首页 且要满足数据不存在
                // 使用findIndex 进行查找 如果当前tabsList 数组里面有与传入的数据相同的，返回该数据，没有返回-1
                const index = state.tabsList.findIndex(item => item.name=== val.name)
                // 不存在 index = -1
                if(index === -1){
                    state.tabsList.push(val)
                }
            }

        }

    }
}

与此对应的在侧边栏组件中关于mutations的使用

clickMenu(item) {
      // 此时拿到的item 就是路由存储的信息
      // this.$router.push({
      //   name: item.name,
      // });

      // 当页面的路由与跳转路由不一致才允许跳转
      if (
        this.$route.path !== item.path &&
        !(this.$route.path === "/home" && item.path === "/")
      ) {
        this.$router.push(item.path);
      }

      // 调用 mutations,第一个参数 需要调用的方法，第二个参数 需要的数据
      this.$store.commit("selectMenu", item);
    },

在首页commonHeader 组件的页面渲染

首先通过计算属性进行处理

computed: {
    ...mapState({
      // 获取当前store里面的属性
      tags: (state) => state.tab.tabsList,
    }),
  },
  mounted() {
    console.log(this.tags, "tags");
  },

页面渲染部分

 <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="item in tags"
          :key="item.path"
          :to="{ path: item.path }"
          >{{ item.label }}</el-breadcrumb-item
        >
      </el-breadcrumb>

样式设置

// 左边的进行设置样式
.l-content {
  display: flex;
  // 内部元素上下居中
  align-items: center;
  .el-button {
    margin-right: 20px;
  }

  /deep/.el-breadcrumb__item {
    .el-breadcrumb__inner {
      font-weight: normal;
      &.is-link {
        color: #666;
      }
    }
    &:last-child {
      .el-breadcrumb__inner {
        color: #fff;
      }
    }
  }
}