效果
↓------------------------------------------------------------------------------------------------------------------------------------------------------------------
html代码:
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in list[0].meta"
:key="index"
:to="item.url"
>
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
JS代码:
根据监听路由变化来动态绑定
methods: {
//如果用户重新刷新页面,因为页面刷新$route没有变化(监听不到)所以要在页面刚进入的时候判断一下当前路由路径(然后再一次渲染)
getMatched() {
this.list = this.$route.matched;
if (this.$route.path == "/goods/sell") {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/sell" },
{ title: "商品列表", url: "/goods/sell" },
];
} else if (this.$route.path == "/goods/Edit") {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/sell" },
{ title: "商品列表", url: "/goods/sell" },
{ title: "商品详情页", url: "/goods/Edit" },
];
} else if (this.$route.path == "/goods/examine") {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/examine" },
{ title: "审核商品", url: "/goods/examine" },
];
}
},
},
created() {
this.getMatched()
},
watch: {
$route(to, from) {
console.log(from.path); //从哪来
console.log(to.path); //到哪去
if (to.path == "/goods/sell" [根据自己页面的路径来修改]) {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/sell" },
{ title: "商品列表", url: "/goods/sell" },
];
} else if (to.path == "/goods/Edit") {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/sell" },
{ title: "商品列表", url: "/goods/sell" },
{ title: "商品详情页", url: "/goods/Edit" },
];
} else if (to.path == "/goods/examine") {
this.list[0].meta = [
{ title: "商品管理", url: "/goods/examine" },
{ title: "审核商品", url: "/goods/examine" },
];
}
},
},