element 面包屑

面包屑。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()

});

 

转载于:https://www.cnblogs.com/cs122/p/10478886.html