面包屑。vue
<template>
<p class="level-bread">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="item in realList" :to="item.path" :key="item.name">{{item.title}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- <router-view /> -->
</p>
</template>
<script>
export default {
name: "lelve-bread",
created(){
this.getRoutePath();
},
data() {
return {
realList: []
}
},
methods:{
getRoutePath() {
this.realList = this.$route.meta.routeList;
}
},
beforeRouteEnter(to,from, next) {
next((vm) => {
vm.realList = to.meta.routeList;
});
},
// watch:{
// $route:function(newV,oldV) {
// this.realList =newV.meta.routeList;
// }
// }
}
</script>
main.js
var routeList = [];
router.beforeEach((to, from, next) => {
console.log(from)
console.log(to)
var index = -1;
for(var i = 0; i < routeList.length; i++) {
if(routeList[i].name == to.name) {
index = i;
break;
}
}
if (index !== -1) {
//如果存在路由列表，则把之后的路由都删掉
routeList.splice(index + 1, routeList.length - index - 1);
} else if(to.name != '登录'){
routeList.push({"name":to.name,"path":to.fullPath, 'title': to.params.hhh});
}
to.meta.routeList = routeList;
next()
});