一个vue前端的例子（四）

本节来细化下aside，将ToolList.vue 中的aside换成

  <el-menu :default-openeds="['1', '2','3']" style="background-color:#d1f1ff">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-s-grid"></i>功能区</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-submenu>
       <el-submenu index="2">
        <template slot="title"><i class="el-icon-s-tools"></i>维护区</template>
          <el-menu-item index="2-1">后台</el-menu-item>
         <el-menu-item index="2-2">用户管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
        <template slot="title"><i class="el-icon-user-solid"></i>用户区</template>
          <el-menu-item index="3-1">个人资料</el-menu-item>
          <el-menu-item index="3-2">联系管理</el-menu-item>
        </el-submenu>
   </el-menu>

菜单不应该是常显的么？如果点击进了别的页面，那么这个菜单怎么才能再次显示出来呢？

这个问题就是把菜单提取公因式，成为component组件，来让其他各个页面只需要简单的调用一下

我们要新建一个普通小组件,应该放在v_project/src/components文件夹下,新建好的Menu.vue后如下所示：

<template>
<div>
    
  <el-menu :default-openeds="['1', '2','3']" style="background-color:#d1f1ff">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-s-grid"></i>功能区</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-submenu>
       <el-submenu index="2">
        <template slot="title"><i class="el-icon-s-tools"></i>维护区</template>
          <el-menu-item index="2-1">后台</el-menu-item>
         <el-menu-item index="2-2">用户管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
        <template slot="title"><i class="el-icon-user-solid"></i>用户区</template>
          <el-menu-item index="3-1">个人资料</el-menu-item>
          <el-menu-item index="3-2">联系管理</el-menu-item>
        </el-submenu>
   </el-menu>



</div>
</template>

<script>

    export default{
        name:"Menu",

        }
</script>


<style scoped>

</style>

那么接下来，我们只需要在首页 ToolList.vue中引入调用这个Menu.vue组件 ，即可。

打开首页 ToolList.vue ，首先是引入bom层：

引入之后，在bom层找到之前的aside位置写上这个组件标签：

保存，看看浏览器，是不是又可以重新看到菜单了