该组件可以在页面上展示一个当前路由状态下的面包屑.为了保证不与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 作为参数, 如果你希望传递其他的参数,请参考该组件源文件.

results matching ""

    No results matching ""