// main.js
import {Breadcrumb, BreadcrumbItem} from 'element-ui';
// 面包屑導(dǎo)航,注入到全局
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

<template>
    <el-breadcrumb>
        <!-- 跳轉(zhuǎn)傳入的為一個(gè)對(duì)象，需要一個(gè)path屬性指明跳轉(zhuǎn)的地址。{path:路由地址} -->
        <el-breadcrumb-item v-for="item in tabList" :key="item.name" :to="{path:item.path}">{{item.label}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
export default {
    name:'ComHeader',
    data:function(){
        return {
            tabList:[
                {
                    name:'index',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/',
                    label:'首頁(yè)'
                },{
                    name:'user',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/user',
                    label:'用戶管理'
                },{
                    name:'mall',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/mall',
                    label:'商品管理'
                }
            ]
        }
    }
</script>

// main.js
import {Tag} from 'element-ui'
// 全局注入vue中
Vue.use(Tag)

<template>
<div class="tag-group">
    <el-tag 
    v-for="(item,index) in tags"
    :key="item.name"
    :closable="true"
    @click="handleMenu(item)"
    @close="handleClose(item,index)"
    size="small"
    :effect="item.name === $router.name ? 'light' : 'dark'"
    >{{item.label}}</el-tag>
</div>
</template>
<script>
export default {
    data(){
        return {
            tags:[
                {
                    name:'index',
                    path:'/',
                    label:'首頁(yè)'
                },{
                    name:'user',
                    path:'/user',
                    label:'用戶管理'
                },{
                    name:'mall',
                    path:'/mall',
                    label:'商品管理'
                }
            ]
        }
    },
    methods:{
        handleMenu:function(tag){
            console.dir(tag)
        },
        // tag的關(guān)閉是通過(guò)手動(dòng)刪除數(shù)據(jù)實(shí)現(xiàn)的
        handleClose(tag,index){
            console.dir(tag)
            this.tags.splice(index,1)
        },
    },
}
</script>