tamplate模板中
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{path:item.path}">
{{item.name}}
</el-breadcrumb-item>
</el-breadcrumb>
script标签中
export default {
data() {
return {
list:[]
}
},
watch:{
$route(){
this.bread();
}
},
methods:{
bread(){
let matched = this.$route.matched.filter(item=>item.name);
let first = matched[0];
if(first&&first.name!=='首页'){ // 我在这里是判断的是name,渲染的是name,但是可以使用其他的字段
matched = [{path:"/home",name:"首页"}].concat(matched);
}
this.list = matched;
}
},
created(){
this.bread();
}
};
路由中
const routes = [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
name: '首页',
meta:{
title : "首页" // 这里可以这样写,判断和渲染这个字段,看个人写法
}
},
{
path: '/login',
component: Login,
name: "登录页"
},
{
path: '/shop',
component: Shop,
name: "商品管理"
},
{
path: '/order',
component: Order,
name: "订单管理"
}
];