Element-UI 寫后台【二】 聯動面包屑

實現思路：

在el-menu-item中綁定點擊事件，每次點擊的時候，把item的值傳入進去，把vuex的item設置成點擊的item。 具體看代碼：

1、 拷貝面包屑導航

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item>
</el-breadcrumb>

2、 因為是跨組件間的傳值，所以使用vuex，把vuex給分離出來

 //導入vux
import tab from 'tab' 

//分離 state,actions, mutations,

export default new Vuex.Store({
modules:{
  tab
}
})

export default {
    
   state: { 
       menu: [],  //菜單

    curentMenu: null //當前點擊的菜單

    }

mutations:{

//每次點擊的時候，把菜單傳入

 selectMenu(state, value) {
            console.log(value,'value') //當前點擊的菜單
           //判斷是否點擊到home標簽
            if (value.name !== 'home') {
                state.curentMenu = value
            } else {
                state.curentMenu = null;
            }

        }
    
}
}

    

根據思路，在el-menu-item中綁定點擊事件 

 

 

 

 

clickMenu(item) {
                this.$store.commit('selectMenu', item)
            }

在頭部部分寫入

 import {mapState} from 'vuex'

 computed: {
          ...mapState({
              current:state=>state.tab.curentMenu
          })
        },

<el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
                <el-breadcrumb-item  to="current.path" v-if="current" >
<!--                    不存在current為null-->
                       {{current.label}}
                </el-breadcrumb-item>