vue+elementUI面包屑组件封装方法详解

本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码，供大家参考，具体内容如下

一.选择用哪种样式

二.在组件文件夹下创建组件

三.在Bread.vue复制如下代码

四.在你需要的页面上应用

// html代码

  

// js代码
import Bread from '../../../components/Bread.vue'  // 引入面包屑组件

export default {
  name: 'nicklist',
  components: {
    Bread // 注册面包屑组件
  },
  data() {
    return {
      dataPath: [
        {
          name: '课程',   // 名称,自定
          path: 'nicklist'  // 路由导航,自定
        },
        {
          name: '课程管理',
          path: 'nicklist'
        }
      ] // 面包屑数据
    }
  }
}

效果如图:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。