Element UI学习4--NavMenu 导航菜单

1、顶栏

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。
在菜单中通过submenu组件可以生成二级菜单。

<tamplate>
<div>
<el-menu 
        :default-active="activeIndex" 
        class="el-menu-demo" 
        mode="horizontal" 
        @select="handleSelect">
        <!-- select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path-->
            <el-submenu index="1">
                <template slot="title">水果</template>
                <el-menu-item index="1-1">草莓</el-menu-item>
                <el-menu-item index="1-2">芒果</el-menu-item>
                <el-menu-item index="1-3">哈密瓜</el-menu-item>
                <el-menu-item index="1-4">西瓜</el-menu-item>
                <el-menu-item index="1-5">葡萄</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">蔬菜</template>
                <el-menu-item index="2-1">青菜</el-menu-item>
                <el-menu-item index="2-2">油麦菜</el-menu-item>
                <el-menu-item index="2-3">菠菜</el-menu-item>
                <el-menu-item index="2-4">空心菜</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">饮料</template>
                <el-submenu index="3-1">
                    <template slot="title">可乐</template>
                    <el-menu-item index="3-1-1">小</el-menu-item>
                    <el-menu-item index="3-1-2">中</el-menu-item>
                    <el-menu-item index="3-1-3">大</el-menu-item>
                </el-submenu>
                <el-menu-item index="3-2">玉米汁</el-menu-item>
                <el-menu-item index="3-3">西瓜汁</el-menu-item>
                <