Vue脚手架和Element-ui—根据路由顶部导航栏动态面包屑实现

面包屑是啥玩意：如图

文案根据页面路由动态生成的实现：

* 注意$route会包含路由信息

我的路由：

这里在路由中要自己设置meta属性来定义title指定面包屑的名称

 

当在首页打印出来$route会发现：

可见matched属性中就包含了路由所匹配的路由记录，可以利用它来做循环来实现动态面包屑。

我们可以单独定义一个组件来实现面包屑功能，在组件中用computed（计算属性）来实现循环渲染代码如下：

<template>
  <!-- 调用elementui组件 -->  
  <el-breadcrumb separator="/" style="display: inline-block; margin-left: 15px">
    <!-- 通过v-for实现循环渲染 -->
    <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbItem.path">
      <!-- 通过自定义的元数据meta的title属性来展示面包屑 -->
      {{ breadCrumbItem.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: "BreadCrumb",
  computed:{
    breadCrumbList(){
      return this.$route.matched;
    }
  },
  mounted() {
    //控制台打印看结构
    //console.log(this.$route);
  }
}
</script>

<style scoped>

</style>