vuejs - element ui 使用导航 navigator, menu
访问量: 1049
参考: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>