VUE前端开发小结(5)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

接上文，上文浅析了一下自己在最开始时通过路由 Vue Router 实现了将主页面中的数据传到子页面，子页面再发送请求调用后台接口，然后把得到的数据先在子页面中放置好，最后在主页面中嵌入子页面就可以了。但明明一个这么简单的需求，我却搞得这么复杂，后来请教了一下前辈，对方都憋不住笑出声，不理解我为什么这么写，经他指导，恍然大悟，又对代码进行了一些改动..............

需求

把之前我后端返回的一个 Service--Model--Monitors 关系的一个 map 用菜单的形式展示出来。

思路

不要单独分一个子页面，也不要在主页面中嵌套什么子页面了。直接在主页面中发请求，调后台接口，然后修饰数据就行。
最简单的，直接利用 ElementUI 中的导航菜单(如下官网示例代码)

<el-menu 
    default-active="2" 
    class="el-menu-vertical-demo" 
    @open="handleOpen" 
    @close="handleClose"> 
    <el-submenu index="1"> 
        <template slot="title"> 
            <i class="el-icon-location"></i> 
            <span>导航一</span> 
        </template> 
        <el-menu-item-group> 
            <template slot="title">分组一</template> 
            <el-menu-item index="1-1">选项1</el-menu-item> 
            <el-menu-item index="1-2">选项2</el-menu-item> 
        </el-menu-item-group> 
        <el-menu-item-group title="分组2"> 
            <el-menu-item index="1-3">选项3</el-menu-item> 
        </el-menu-item-group> 
        <el-submenu index="1-4"> 
            <template slot="title">选项4</template> 
                <el-menu-item index="1-4-1">选项1</el-menu-item> 
            </el-submenu> 
    </el-submenu> 
    <el-menu-item index="2">
        <i class="el-icon-menu"></i> 
        <span slot="title">导航二</span> 
    </el-menu-item> 
    <el-menu-item index="3" disabled> 
        <i class="el-icon-document"></i> 
        <span slot="title">导航三</span> 
    </el-menu-item> <el-menu-item index="4"> 
        <i class="el-icon-setting"></i> 
        <span slot="title">导航四</span> 
    </el-menu-item> 
</el-menu>

在导航菜单中，menu 有一个 select 事件，表示菜单激活回调，它需要一个参数，就是 index。在我实际开发时，我直接通过 v-for遍历调用后台接口得到的数据，因为后台返回的是一个 map，所以就直接把 map 的 key 作为v-for的 key，同是也作为 index，直接在{{}}中填入自己想要展示的内容就行。

其实需求很简单，实现起来也很简单，是自己一开始看到已有项目后想复杂了，主要还是一开始没看懂需求，也对 vue 不是很熟练，也不会跟 ElementUI 结合起来使用，不过经过这次的锻炼，相信自己对 Vue.js有了进一步的理解。