内容管理模块（三） -面包屑导航的组件封装 和 更换路由页面内容时， 默认插槽的具体应用

03-内容管理-面包屑组件封装

目的：面包屑导航的主干部分进行组件封装，只在路由文件中进行更换插槽插入的内容

封装组件：components/my-bread.vue

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
    <el-breadcrumb-item><slot>slot>el-breadcrumb-item>
  el-breadcrumb>
template>

<script>
export default {}
script>

<style scoped lang='less'>style>

使用组件：views/article/index.vue， 只有一个地方进行修改，是默认插槽的使用

import MyBread from '@/components/my-bread'
export default {
  components: { MyBread },

面包屑导航更换：views/article/index.vue，之后只需在其他路由组件中更改内容管理即可

<div slot="header">
    <my-bread>内容管理my-bread>
div>

内容管理

```