breadCrumb.vue
<template>
<div class="bread_crumb">
<div class="crumb">
<div class="crumb_content">
<a-breadcrumb separator=">">
<a-breadcrumb-item v-for="(item,index) in breadList" :key="index">
<router-link :to="{path:item.path}">{{item.meta.title}}</router-link>
</a-breadcrumb-item>
</a-breadcrumb>
<div class="go_back" @click="goBack">上一页</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'breadCrumb',
data(){
return{
breadList:[], //路由集合
}
},
created(){
this.getBreadCrumb()
},
mounted(){
},
watch:{
$route(){
this.getBreadCrumb()
}
},
methods:{
//返回上一页
goBack(){
this.$router.go(-1)
},
getBreadCrumb(){
let matched=this.$route.matched
this.breadList=[{path:'/',meta:{title:'首页'}}].concat(matched)
}
}
}
</script>
<style scoped lang="less">
.bread_crumb{
.crumb{
width:100%;
background-color: #f7f7f7;
.crumb_content{
width:1200px;
margin: 0 auto;
overflow: hidden;
.ant-breadcrumb{
height:30px;
line-height: 30px;
float: left;
a{
font-size: 14px;
color: #a1a1a1;
text-decoration: none;
}
a:hover{
color: #0169b1;
}
span:last-child{
a{
color: #0169b1;
}
}
}
.go_back{
float: right;
height:30px;
line-height: 30px;
cursor: pointer;
transition: all .4s;
font-size: 14px;
color: #a1a1a1;
padding: 0 20px;
&:hover{
color: #0169b1;
}
}
}
}
}
</style>
