vue + element 动态面包屑

两种思路

1 平级路由，通过添加meta来做面包屑

2 嵌套路由，通过新增router-view做切换

注：因为是后台管理系统，左侧有一个sidebar，所以在实现上会比没有sidebar的更复杂

 

面包屑采用elementui的组件，单独提取出来

// breadcrumbList 为在store中存储的面包屑数据

<template>
  <div class="breadcrumb_container">
    <el-breadcrumb separator="/">
      <template v-for="(item, index) in breadcrumbList">
        <el-breadcrumb-item 
        :key="index"
        v-if="item.name"
        :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Provide, Watch, Prop, Model } from 'vue-property-decorator'
import { State } from 'vuex-class'
@Component
export default class Breadcrumb extends Vue{
  @State breadcrumbList!: object[]
}
</script>

 

第一种 - 平级路由

平级路由

router.beforeEach中更新面包屑的数据

  if (to.meta && to.meta.parent) {
    store.state.breadcrumbList = to.meta.parent
  }else{
    store.state.breadcrumbList = [{ path: to.path.split('/')[1], name: to.name }]
  }

效果

面包屑是没问题了，到这，如果没有左侧sidebar的 就已经结束了

 

但是左侧的sidebar高亮显示没有了~，另外其实面包屑的路径是不完整的，没有包括有子集的一级名称~（因为一级名称并没有相应的页面，只是作为一个容器在用）

sidebar采用的也是elementui的组件 传送门

因为采取的是路由path作为高亮，而实际上sidebar的数据中并没有这个path，所以就没有高亮了~

这个的解决办法就是

直接读取store中存储的breadcrumbList值

这样确实保证了左侧的高亮

第一种方法的弊端

1 需要在router.js中额外的写一些meta数据

2 左侧sidebar中 含有子集的一级名称并没有在面包屑中显示

3 更改的地方有点分散，比较乱

关于第二点 感觉可以通过获取左侧菜单数据，然后递归获取about的父级的title做面包屑显示，由于个别原因 并没有继续往下走

下面说第二种方法 - 嵌套路由 + router-view

index.vue实际上只作为一个入口

到这 第二种方式就可以正常的显示面包屑了，但是为了左侧sidebar的显示正确 还需要做些其他的

【如果不这样做的话  当路由为/about/add 跳到/about的时候   第一次点击会找不到对应的路由 导致进入404】

 1 sidebar的数据中  index的路由值  需要添加 '/'  

2 在sidebar组件中 也需要保留'/'

以上~

就没什么问题了

至于三级的sidebar目前项目当中还没出现 所以暂时还没有进行测试

 

elementUI 的el-menu  在点击当前栏目的时候 会报错NavigationDuplicated  但不影响使用

想去除的话 可以在router部分添加

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}