vue 后台面包屑用法 

 1 <template>
 2   <div class="bread">
 3      <el-breadcrumb class="breadcrumb" separator="/">
 4             <el-breadcrumb-item>康迪汽车</el-breadcrumb-item>
 5             <el-breadcrumb-item 
 6                 v-for='(item,index) in levelList'
 7                 :key='index'
 8                 v-if='item.name'>
 9                 {{item.name}}
10             </el-breadcrumb-item>
11     </el-breadcrumb>
12   </div>
13 </template>
14 
15 <script>
16 export default {
17   name: '',
18   data () {
19       return {
20           levelList: null
21       }
22   },
23   created () {
24       this.getBreadcrumb();
25   },
26   methods: {
27     getBreadcrumb () {
28         let matched = this.$route.matched.filter(item => item.name);
29         const first = matched[0];
30         this.levelList = matched;
31     }
32   },
33   watch: {
34       $route() {
35         console.log(1111)
36         this.getBreadcrumb();
37       }
38   }
39 }
40 </script>
41 
42 <style lang="less" scoped>
43  .bread {
44    background-color: #f2f2f2;
45    padding: 15px;
46    margin: -12px -12px 10px -12px;
47  }
48 </style>

资料分享网站

 

可以加我微信进群，有资料送，也可以讨论问题

 

posted @ 2018-04-12 11:00  浮生如梦似离殇  阅读(2778)  评论(0)  编辑  收藏  举报