Vue 封装 breadcrumb（面包屑） 组件

Breadcrumb 面包屑

components/common/breadcrumb/src/breadcrumb.vue

components/common/breadcrumb/src/breadcrumb-item.vue

components/common/breadcrumb/index.js

import VBreadcrumb from './src/breadcrumb';

VBreadcrumb.install = (Vue) => {
  Vue.component(VBreadcrumb.name, VBreadcrumb);
};

export default VBreadcrumb;

components/common/breadcrumb-item/index.js

import VBreadcrumbItem from '../breadcrumb/src/breadcrumb-item';

VBreadcrumbItem.install = (Vue) => {
  Vue.component(VBreadcrumbItem.name, VBreadcrumbItem); // https://cn.vuejs.org/v2/api/#Vue-component
};

export default VBreadcrumbItem;

全局注册组件

main.js

import Breadcrumb from '@/components/common/breadcrumb/index';
import BreadcrumbItem from '@/components/common/breadcrumb-item/index';

Vue.config.productionTip = false;

Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
});

使用

  首页
  正文