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

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

本篇内容主要讲解“vue2.0中elementUI怎么制作面包屑导航栏”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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>    <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>

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

到此，相信大家对“vue2.0中elementUI怎么制作面包屑导航栏”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[