vue 2.0 + elementUI 实现面包屑导航栏

Main.js

9种响应式面包屑导航和分步导航指示器UI设计
```

var routeList = [];

router.beforeEach((to, from, next) => {

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});

}

to.meta.routeList = routeList;

next()

});

<p><strong>2、在要使用的组件中</strong></p>

<template>

<div class="level-bread">

<el-breadcrumb separator="/">

<el-breadcrumb-item v-for="item in realList" :to="item.path">{{item.name}}</el-breadcrumb-item>

</el-breadcrumb>

</div>

</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>

<p>使用 watch 或者 beforeRouteEnter 均可。 <br>需要注意的是，beforeRouteEnter 此时访问不到this。</p>
<p><strong>官网描述</strong>  <a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html" rel="nofollow noreferrer">https://router.vuejs.org/zh-c...</a></p>

const Foo = {

template: ...,

beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不！能！获取组件实例 this

// 因为当守卫执行前，组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用

// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 this

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 this

}

}

<p>参考资料:<br><a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html" rel="nofollow noreferrer">https://router.vuejs.org/zh-c...</a><br><a href="https://segmentfault.com/q/1010000011795481/a-1020000011795530">https://segmentfault.com/q/10...</a></p>

原文地址：https://segmentfault.com/a/1190000013315587