Vue 面包屑导航

样式采用的是element ui 中的面包屑设置的，template>el-breadcrumb>el-breadcrumb-itemseparator = '/'v-for = "(item,index)in breadlist":key = 'index':to="{path:item.path}">{{item.meta.CName}}el-b

zyx_

9854人浏览 · 2018-01-04 16:46:49

zyx_ · 2018-01-04 16:46:49 发布

样式采用的是element ui 中的面包屑设置的，

  <template>
 
  <el-breadcrumb>
 
  <el-breadcrumb-item separator = '/' v-for = "(item,index) in breadlist" :key = 'index' :to="{path: item.path}">{{item.meta.CName}}
 
  </el-breadcrumb-item>
 
  </el-breadcrumb>
 
  </template>

js部分

  <script>
 
  export default {
 
  data(){
 
  return {
 
  breadlist: ''
 
  }
 
  },
 
  created() {
 
  this.getBread();
 
  },
 
  methods:{
 
  getBread(){
 
  this.breadlist = this.$route.matched;
 
  this.$route.matched.forEach((item,index)=>{
 
  //先判断父级路由是否是空字符串或者meta是否为首页，直接复写路径到根路径
 
  item.meta.CName === '首页' ? item.path = '/' : this.$route.path === item.path;
 
  });
 
  }
 
  },
 
  watch:{
 
  $route(){
 
  this.getBread();
 
  }
 
  }
 
  }
 
  </script>