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