vue简单实现element面包屑

问题描述：

后台管理系统在内容布局上方 实现一个面包屑功能点击后可跳转到对应页面

实现代码：

新建一个新的Breadcrumb.vue组件，进行面包屑的简单封装

<template>
  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index/Index' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item
        v-for="item in breadList"
        :key="item.path"
        :to="item.path"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  computed: {
    breadList() {
      return this.$route.matched;
    },
  },
  mounted() {
    // console.log(this.$route.matched);
  },
};
</script>

<style>
.breadcrumb {
  padding-bottom: 20px;
}
</style>

---

我遇到的问题：

因为我的二级路由都是模块的名字，没有对应的页面，所以点击二级路由的时候会报错或者页面刷新后空白，我的解决方法是设置每个模块的路由重定向，设置为每个模块下的第一个页面。 redirect: “/log/Log”,

{
        path: '/log',
        name: '系统管理',
        component: index,
        redirect: "/log/Log",  //路由重定向
        iconCls: 'el-icon-tickets',
         children: [......]
       }

---

使用组件：

直接在template内写组件名称，其他自动生成

<template>
  <div class="myApply">
    <Breadcrumb></Breadcrumb>
    </div>
</template>

<script>
import Breadcrumb from '../Breadcrumb.vue';
export default { components: { Breadcrumb } };
</script>

<style>
</style>