Breadcrumb
该组件可以在页面上展示一个当前路由状态下的面包屑.为了保证不与ElementUI的组件命名冲突, 这里加了前缀header-.
该组件使用非常简单.
使用方法
全局引入
// main.js
// breadcrumb
import breadcrumb from './components/breadcrumb'
Vue.use(breadcrumb)
局部引入
// Foo component
import { HeaderBreadcrumb } from '@/components/breadcrumb'
export default {
...
components: { HeaderBreadcrumb }
...
}
模板定义
// Foo component
...
<template>
...
<header-breadcrumb :breadData="$route.matched" />
...
</template>
属性配置
| 参数 | 说明 | 类型 | 可选值 | 默认 |
|---|---|---|---|---|
| breadData | 为面包屑提供当前路由的数据 | Array | - | $route.matched |
[warning] 传参注意
默认的面包屑请务必传递 $route.matched 作为参数, 如果你希望传递其他的参数,请参考该组件源文件.