zoukankan      html  css  js  c++  java
  • vue的面包屑导航组件

    用来将其放到navbar中;

    Breadcrumb/index.vue

     1 <template>
     2    <el-breadcrumb class="app-breadcrumb" separator="/">
     3      <transition-group>
     4        <el-breadcrumb-item  v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
     5          <span   v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
     6          <router-link   v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
     7        </el-breadcrumb-item>
     8      </transition-group>
     9    </el-breadcrumb>
    10 </template>
    11 <script>
    12     export default {
    13         name: "idnex",
    14       data(){
    15           return {
    16             levelList:null
    17           }
    18       },
    19       created() {
    20         this.getBreadcrumb()
    21       },
    22       watch:{
    23         $route(){
    24           this.getBreadcrumb()
    25         }
    26       },
    27       methods:{
    28         getBreadcrumb(){
    29             let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。
    30             const first=matched[0]
    31             if(first && first.name !=='dashboard'){//$route.name当前路由名称  ;$route.redirectedFrom重定向来源的路由的名字
    32               matched=[{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
    33             }
    34             this.levelList=matched
    35           }
    36       }
    37     }
    38 </script>
    39 <style rel="stylesheet/scss" lang="scss" scoped>
    40   .app-breadcrumb.el-breadcrumb {
    41     display: inline-block;
    42     font-size: 14px;
    43     line-height: 50px;
    44     margin-left: 10px;
    45     .no-redirect {
    46       color: #97a8be;
    47       cursor: text;
    48     }
    49   }
    50 </style>
  • 相关阅读:
    用户自定义控件
    sql 动态行转列
    sql 将表B中不存在表A的数据 插入到表A中
    C#获取键盘和鼠标操作的时间的类
    滚动条加粗和panel,gridControl结合用
    第三项任务——用例建模
    第二项任务——项目需求分析
    第一项任务:团队组建及项目启动
    实验报告(结对项目)
    实验报告(个人项目)
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9406032.html
Copyright © 2011-2022 走看看