基于el-menu 导航栏学习（1）
对于导航栏主菜单NavMenuDemo.vue进行for循环改进，代码如下所示：
<template>
<el-container>
<el-aside width="200px">
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
router
@select="handleSelect"
>
<el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
<template slot="title">
<i class="el-icon-s-platform"></i>
<span> {{ item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>
<script>
export default({
data() {
return {
navList: [
{ name: "/test1", navItem: "导航一" },
{ name: "/test2", navItem: "导航二" },
{ name: "/test3", navItem: "导航三" },
],
};
},
methods:{
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
}
})
</script>
<style>
.el-aside {
height: 100vh;
text-align: center;
}
.el-main {
background-color: #E9EEF3;
}
</style>