NavMenu
装置配置
npm install element-ui -S
全局引入// main.js import 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')
}
]
}