今日简单分享 breadcrumb 组件的源码实现,主要从以下三个方面:
1、breadcrumb 组件页面结构
2、breadcrumb 组件属性
3、breadcrumb 组件 slot
一、breadcrumb 组件页面结构
二、breadcrumb 组件属性
2.1 separator 属性,分隔符,类型 string,默认 /。
组件属性使用及展示效果:
小结:面包屑组件这样设计的优点:
- 组件颗粒度更小,职责单一,使用更加灵活。
- 传值简单,避免组件的高度耦合。
2.2 separator-class 属性,图标分隔符 class,类型 string,无默认值。
组件使用及展示效果:
三、breadcrumb 组件 slot
3.1 to 挂载,路由跳转对象,同 vue-router
的 to,
类型 string/object,无默认值。
组件属性使用及展示效果:
3.2 replace 挂载,在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录,类型 boolean,默认 false。
组件属性使用及展示效果: