vue中面板屑导航组件实现

Posted 2021-09-14 小生不才

面包屑导航实现

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