vue2.0+elementUI完成面包屑导航栏

Main.js

var routeList = [];
router.beforeEach((to, from, next) => {
var index = -1;
for(var i = 0; 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()
});


2、在要运用的组件中

运用 watch 或许 beforeRouteEnter 都可。
须要注重的是，beforeRouteEnter 此时接见不到this。

官网形貌 https://router.vuejs.org/zh-c&＃8230;

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`
}
}

参考资料:
https://router.vuejs.org/zh-c&＃8230;
https://segmentfault.com/q/10&＃8230;