面包屑导航实现

咱们通过 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>