本篇文章主要给大家详细代码讲解了vue2.0 elementui制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。
main.js
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()});
2、在要使用的组件中
<template> <p class="level-bread"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="item in reallist" :to="item.path">{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </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>
用 watch 或者 beforerouteenter 均可。
需要注意的是，beforerouteenter 此时访问不到this。
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` }}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
通过vue用v-for实现给src属性赋值的方法（详细教程）
通过vue中v-for实现加载本地静态图片方法（详细教程）
在vue中如何解决v-for使用报红并出现警告的问题（详细教程）
以上就是在vue2.0中通过elementui制作面包屑导航栏的详细内容。