【element-ui】面包屑导航

使用面包屑组件

<template><el-breadcrumb separator="/" class="bread"><!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> --><!--面包屑的每一项，通过 v-for="item in navs" 循环遍历 navs 数组生成,显示路由元信息（meta）中的 title 字段，作为面包屑项的文本 --><el-breadcrumb-item v-for="item in navs" :key="item.path" :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>
</el-breadcrumb></template><script>
export default {computed:{navs(){console.log('路由信息',this.$route.matched);//Vue Router 提供的属性，返回一个数组，包含当前路由匹配到的所有层级路由记录（从顶层到当前页）let routes = this.$route.matched;//处理第一个路由的信息routes[0].path ='/';return routes}},created(){console.log(this.$route);//包含当前的路由信息 以及上级路由信息 }
}
</script><style lang="less" scoped>
.bread{margin-bottom: 10px;
}
</style>

注册组件

main.js

import Breadcrumb from './components/Breadcrumb/Breadcrumb.vue'
Vue.component('Breadcrumb',Breadcrumb)

引用组件

<template><div class="category"><Breadcrumb></Breadcrumb></div>
</template>

• 效果