Back

vuejs - element ui 使用导航 navigator, menu

发布时间: 2021-04-19 03:45:00

参考：https://segmentfault.com/a/1190000007810151

下面又是个完整代码

注意：

1. default-active 那里不要动。 表示了当前的路径

2. <i class= ... ></i> 这里是图标

3. el-menu-item index = "..." 这里就是页面跳转的路径. 填入 vue-router中定义的path即可。

4. el-menu 标签中，增加 router, 表示就会配合vuej-router来使用路由(下面的index 就会生效）

    <el-menu :default-active="$route.path" class="el-menu-demo"
      mode="horizontal"  router>
      <el-submenu index="/">   
        <template slot="title">
          <i class='el-icon-notebook-2'>
          数据库                   
        </template>     
        <el-menu-item index="/databases/general_statistics">
          <i class='el-icon-notebook-2'>
          基本统计信息</el-menu-item>    
        <el-menu-item index="/databases/consume_statistics">生产消费信息
        <el-menu-item index="/databases/future_requirements">未来需求信息
        <el-menu-item index="/databases/factors">排放因子
      </el-submenu>    
      <el-menu-item index="/topologies" >
        <i class='el-icon-picture'> 
        拓扑图</el-menu-item>  
    </el-menu>

Back