NavMenu
装置配置
npm install element-ui -S
全局引入// main.jsimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)
NavMenu 导航的应用
// src/components/NavMenu <el-col :span="24"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router unique-opened > <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> </el-col>以上是NavMenu默认的配置, 咱们间接拷贝下来应用即可.后续要增加路由跳转须要配置一些货色, 比方: router 和 unique-opened。
// route/index.js{ // 默认展现的页面 path: '/', component: ()=> import('@/views/Home.vue'), // 要在该组件中跳转并显示对应内容需把组件存在该子路由下 children: [ { // 这里的 path 和下面 NavMenu 组件中的 index 保持一致 path: '1', component: () => import('@/views/A.vue') } ]}