封装Vue 面包屑导航

封装 面包屑导航

TestBreadcrumb.vue

<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{secondName}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{threeName}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: ['secondName', 'threeName'],
  name: 'testBreadcrumb',
}
</script>

<style lang="less" scoped>
</style>

原页面

    <my-bread secondName="用户管理" threeName="用户列表"></my-bread>
    <script>
        export default {
          props: ['valV'],
        }
    </script>

router

// 封装面包屑
import bread from './components/TestBreadcrumb.vue'
Vue.component('my-bread', bread)