Vue 面包屑导航
样式采用的是element ui 中的面包屑设置的,template>el-breadcrumb>el-breadcrumb-itemseparator = '/'v-for = "(item,index)in breadlist":key = 'index':to="{path:item.path}">{{item.meta.CName}}el-b
·
样式采用的是element ui 中的面包屑设置的,
<
template
>
<
el-breadcrumb
>
<
el-breadcrumb-item
separator =
'/'
v-for = "(
item,
index)
in
breadlist"
:key = '
index'
:to="{
path:
item.
path}"
>{{
item.
meta.
CName}}
</
el-breadcrumb-item
>
</
el-breadcrumb
>
</
template
>
js部分
<
script
>
export
default {
data(){
return {
breadlist:
''
}
},
created() {
this.
getBread();
},
methods:{
getBread(){
this.
breadlist =
this.
$route.
matched;
this.
$route.
matched.
forEach((
item,
index)
=>{
//先判断父级路由是否是空字符串或者meta是否为首页,直接复写路径到根路径
item.
meta.
CName ===
'首页' ?
item.
path =
'/' :
this.
$route.
path ===
item.
path;
});
}
},
watch:{
$route(){
this.
getBread();
}
}
}
</
script
>
更多推荐
已为社区贡献29条内容
所有评论(0)