vue2.0 elementUI制作面包屑导航栏

Vue 2.0与ElementUI结合制作动态面包屑导航栏详解

对于Vue 2.0和ElementUI的新手和老手来说，制作一个动态的面包屑导航栏是一个常见的需求。下面，我们将通过详细的步骤和代码示例，指导大家完成这一任务。

一、路由配置与获取

在Vue Router中，我们可以使用`beforeEach`钩子函数来监听路由变化，并获取当前路由信息。

Main.js

```javascript

var routeList = [];

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

// 检查当前路由是否在routeList中

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; // 将routeList存入meta中，方便后续获取

next();

});

```

二、面包屑组件的实现

使用ElementUI中的``组件来显示面包屑导航。通过`v-for`指令遍历`realList`，生成对应的``。

组件模板部分

```html

```

组件逻辑部分

在组件的`created`钩子函数中，获取当前路由的`routeList`，并存储在组件的`data`中。可以使用`beforeRouteEnter`钩子函数在路由进入前获取的`routeList`。这里需要注意的是，由于Vue的生命周期问题，在`beforeRouteEnter`中无法直接访问组件实例`this`。我们使用`next`回调函数来获取组件实例。使用watch监听路由变化也可以达到同样的效果。

组件脚本部分

```javascript