对 el-menu 的回顾使用（实现进入页面默认选择以及路由跳转）

对 el-menu 的回顾使用（实现进入页面默认选择以及路由跳转）

主要提示自己如何使用，所以直接附上代码，大家仅供参考（基于vue）

<template>
    <div class="tab">
        <el-menu :default-active="'/state/stateTable'" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                {{ item.navItem }}
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
    data() {
        return {
            navList: [
                { name: '/state/stateTable', navItem: '健康' },
                { name: '/state/subHealth', navItem: '亚健康' },
                { name: '/state/defects', navItem: '缺陷' },
                { name: '/state/seriousDefect', navItem: '严重缺陷' },
            ],
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style scoped>
.tab {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(2, 129, 242, 0.2);
}
.el-menu {
    height: 100%;
    background-color: #0a1b33;
    border: 0px solid #000;
    margin-left: 10px;
}
.el-menu--horizontal > .el-menu-item {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #7cd2ff;
    opacity: 0.6;
}
.el-menu--horizontal > .el-menu-item.is-active {
    background: none;
    color: #7cd2ff;
    opacity: 0.6;
    border-bottom: 2px solid #007ee8;
}
.el-menu--horizontal > .el-menu-item:hover {
    background: none;
    color: #7cd2ff;
    opacity: 0.6;
}
</style>