**单独编写一个组件文件 Breadrumb.vue**
**第一套样式采用element-ui的样式**
<div class="example-container">
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="(item,index) in breadList"
:key="index"
:to="{ path: item.path }"
>{
{
item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
**第二套基础css样式**
<div >
<span v-for="(item,index) in breadList">
<router-link :to="{path:item.path}" :key="item.path" style="color:#09C762">
<span>{
{
item.meta.title}}</span>
<template>{
{
index !== breadList.length - 1 ? '/' : ''}}</template>
</router-link>
<span v-if="index == breadList.length">{
{
item.meta.title}}</span>
</span>
</div>
**js部分**
<script>
export default {
data() {
return {
breadList: []
};
},
watch: {
$route() {
this.getBreadcrumb();
}
},
methods: {
isHome(route) {
return route.name === "Index";
},
getBreadcrumb() {
let matched = this.$route.matched;
if (!this.isHome(matched[0])) {
matched = [{
path: "/", meta: {
title: "首页" } }].concat(matched);
}
this.breadList = matched;
}
},
created() {
this.getBreadcrumb();
}
}
</script>
**router文件**
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index,
meta: {
title: '首页' }
},
{
path: '/goodsDetails',
name: 'GoodsDetails',
component: GoodsDetails,
meta: {
title: '商品详情' },
children: [{
path: '/keyard',
name: 'keyard',
component: keyard,
meta: {
title: '商品系统' },
}]
}
]
})
**文件引用*
<template>
<div>
<Breadrumb></Breadrumb>
</div>
</template>
<script>
import Breadrumb from '@/components/Breadrumb.vue'
components: {
Breadrumb
}
</script>