element 面包屑--封装

<template>
    <div class="hearder-box">
        <div class="left-box">
            <el-breadcrumb>
                <el-breadcrumb-item v-for="(item, index) in routerlist" :key="index">
                <a @click.prevent="handleClick(item)">{{item.name}}</a>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right-box">
            <el-badge :value="newsNum" :max="99" class="badge">
                <div class="news">
                    <img src="../../assets/img/home/xx.png" alt="">
                </div>
            </el-badge>
            <el-dropdown size="medium" trigger="click" @command="handleCommand">
                <div class="user-box">
                    <el-avatar class="user-avatar" icon="el-icon-user-solid" src=""></el-avatar>
                    <div class="name">{{userName}}</div>
                    <i class="el-icon-arrow-down"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="signOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </div>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    data() {
        return {
            newsNum:111,//消息数量
            userName:'addmin',
            routerlist:this.$store.state.breadcrumbData,
        };
    },
    created() {
    },
    beforeMount() {
        this.$router.beforeResolve((to, from, next) => {
            if(to.path== '/login'){
                this.routerlist = [{
                    path:'/Index',
                    name:'首页'
                }];
                this.$store.commit('breadcrumbData',this.routerlist);
                next();
                return
            }
            else if(to.path== '/403'&&to.path=='/404'){
                next();
                return;
            }
            for(let i in this.routerlist){
                if(this.routerlist[i].path == to.path){
                    let obj = JSON.parse(JSON.stringify(this.routerlist[i]))
                    this.routerlist.push(obj)
                    next();
                    this.routerlist.splice(i,1)
                    this.$store.commit('breadcrumbData',this.routerlist);
                    return;
                }
            }
            // 退出重新登录 会把 this.routerlist 转换成set 类型（暂不知道原因），所以判断如果是set 类型 转换成 array
            if(Object.prototype.toString.call(this.routerlist) == '[object Set]'){
                this.routerlist = Array.from(this.routerlist);
            }
            this.routerlist.push({
                path:to.path,
                name:to.meta.title
            })
            this.$store.commit('breadcrumbData',this.routerlist);
            next();
        })
    },
    methods: {
        handleClick(item) {
            if (item.path && item.name) {
                this.$router.push(item.path);
            }
        },
        // 下拉菜单
        handleCommand(type){
            this[type]();
        },
        // 退出
        signOut(){
            this.$router.push('/login')
        }
    }
};
</script>

<style scoped>
.hearder-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.15rem;
    padding-right: 0.4rem;
}
.left-box,
.right-box {
    height: 100%;
    display: flex;
    align-items: center;
}
.left-box {
    width: calc(100% - 2.5rem);
    white-space: nowrap;
}
.right-box {
    width: 2.5rem;
}
.route-item >>> .el-breadcrumb__inner {
    cursor: pointer !important;
}
.right-box {
    justify-content: flex-end;
}
.news {
    position: relative;
}
.news img {
    width: 0.24rem;    
    height: 0.27rem;
}
.right-box >>> .el-badge__content {
    background-color: #E01111;
}
.user-box {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.user-avatar {
    width: 0.32rem;
    height: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge {
    cursor: pointer;
    margin-right: 0.4rem;
}
.name {
    margin-left: 0.08rem;
    margin-right: 0.16rem;
    font-size: 0.16rem;
    color: #222933;
}
</style>

store:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

// store 是vuex对象被导出挂在到全局
const store = new Vuex.Store({
    state:{
        userBean:'',
        loginStateCode:'',//登录状态码
        pwd: '',
        breadcrumbData:[{
            path:'/Index',
            name:'首页'
        }],//面包屑数据
    },
    mutations:{
        userBean(state, data){
            state.userBean = data;
        },
        loginStateCode(state, data){
            state.loginStateCode = data;
        },
        pwd(state, data){
            state.pwd = data;
        },
        breadcrumbData(state,data){
            state.breadcrumbData = new Set(data);
        }
    },
    actions:{
        // 异步方法
        
    },
    // Vuex持久化存储---->>sessionStorage(存储对象)
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val){
            return{
                userBean: val.userBean,
                loginStateCode:val.loginStateCode,
                pwd: val.pwd,
                breadcrumbData:val.breadcrumbData
            };
        },
    })],
    
});

export default store;