面包屑导航实现

咱们通过elemnt-ui实现的面包屑导航组件,这里我用了localStorage存储数据，咱们也能够应用vuex的形式实现

myBread组件

<template lang="html">
  <div class="breadcrumb-box">
    <span class="location">
      <i class="el-icon-location"></i>
      我的地位：
    </span>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        :to="bread.path"
        v-for="(bread, index) in breadscom"
        :key="index"
      >
        {{ bread.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'MyBread',
  data() {
    return {
      breadscom: [],
    }
  },
  created() {
    this.breadscom = JSON.parse(window.localStorage.getItem('breads')) // 通过localStorage获取面包屑数据
  },
}
</script>

<style lang="css" scoped>
.breadcrumb-box {
  font-size: 14px;
  display: flex;
  height: 40px;
  line-height: 40px;
  background-color: #def1f2;
  padding: 0 10px;
  color: #05a49b;
  margin-top: 20px;
  margin-bottom: 20px;
}

.breadcrumb-box .location {
  font-weight: bold;
}
.location .el-icon-location {
  font-size: 20px;
  margin-right: 6px;
  vertical-align: middle;
}
.breadcrumb-box .el-breadcrumb {
  line-height: 40px;
}
</style>

应用面包屑

<template>
  <div>
    <my-bread></my-bread>
  </div>
</template>

<script>
import MyBread from '../components/myBread'

const breads = [
  {
    path: '', // 面包导航链接
    title: '我的我的项目', // 面包导航文字
  },
  {
    path: '',
    title: '我的项目申报',
  },
  {
    path: '',
    title: '省级年度重大工业我的项目',
  },
]
export default {
  components: {
    MyBread,
  },
  data() {
    return {
      breads,
    }
  },
  created() {
    window.localStorage.setItem('breads', JSON.stringify(breads)) // 贮存导航数据
  },
}
</script>