<template>
<div>
<img :src="imgSrc.src" />
<el-menu mode="horizontal" :default-active="this.activeIndex" router>
<el-menu-item v-for="item in leadList" :key="item.length" :index="item.name">{{item.leadItem}}</el-menu-item>
</el-menu>
//defalut-active 默認初始路由
//index 填入對應路由觸發el-menu-item的樣式
</div>
</template>
<script>
import GlOBAL from "api/global_variable.js";
export default {
data() {
return {
activeIndex: "/homepage",//初始化active
leadList: [
{
name: "/homepage",
leadItem: "主頁"
},
{
name: "/news",
leadItem: "新聞動態"
},
{
name: "/members",
leadItem: "成員力量"
},
{
name: "/science",
leadItem: "科研情況"
},
{
name: "/backend",
leadItem: "後臺管理"
}
],
imgSrc: [
{
src: require("assets/img/logo.png")
}
]
};
},
mounted() {
//點擊後改變default-active
let name = this.$router.name;
switch (name) {
case "Homepage":
this.activeIndex = GlOBAL.pathName.homepage;
break;
case "News":
this.activeIndex = GlOBAL.pathName.news;
break;
case "Members":
this.activeIndex = GlOBAL.pathName.members;
break;
case "Science":
this.activeIndex = GlOBAL.pathName.science;
break;
case "Backend":
this.activeIndex = GlOBAL.pathName.backend;
}
}
};
</script>
<style lang="stylus" scoped></style>
