vue&Element

发布时间：2024-12-10 01:33

JavaScript前端框架：React或Vue的入门 #生活知识# #编程教程#

vue&Element-ui实现的导航菜单 vue&Element-ui实现导航菜单所需依赖及组件组件介绍结果截图

vue&Element-ui实现导航菜单

网上有很多demo和示例，有的可以实现二级但不支持三级，有的支持三级但是有些复杂（也许是因为本人技术能力不足），当然也可以找到完整的模板，套用起来很方便，，，直接套用模板担心后续修改会有后遗症，好了~~~直接上代码吧，总之这个写法也许不是最好的，但是对于初学者很好理解

所需依赖及组件

1、首先需要安装element-ui并且在main.js中引入（npm、vue-cli创建新项目等在这里不做介绍）
（1）安装：npm i element-ui -S
（2）main.js中引入：
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
2、根据需要写好组件，包含公共组件及各模块所需组件，并且配置路由
（1）公共布局组件
（2）公共路由承载组件
（3）各模块对应组件
主要代码存放结构如下图
在这里插入图片描述

组件介绍

1、公共布局组件-----layout布局组件中存放内容（具体布局及样式根据需要而定）
在这里插入图片描述
2、公共承载组件----AppMain组件中存放内容

3、菜单渲染组件sidebar（index.vue）

<template> <div class="sidebar"> <el-menu :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" mode="vertical" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" router> <template v-for="(item,index) in routes" v-if="!item.hidden" >  <el-menu-item v-if="!item.leaf && !item.leafThree && item.children.length>0" :index="item.path"> <i :class="item.meta.icon"></i> <span slot="title">{{item.name}}</span> </el-menu-item>  <el-submenu :index="index+''" v-if="item.leaf"> <template slot="title"> <i :class="item.meta.icon"></i> <span>{{item.name}}</span> </template> <el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden" :key="child.path"> <i :class="child.meta.icon"></i> <span>{{child.name}}</span> </el-menu-item> </el-submenu>  <el-submenu :index="index+''" v-if="!item.leaf && item.leafThree"> <template slot="title"> <i :class="item.meta.icon"></i> <span>{{item.name}}</span> </template> <el-submenu v-for="child in item.children" :index="child.path" :key="child.path" v-if="child.leaf"> <template slot="title"> <i :class="child.meta.icon"></i> <span>{{child.name}}</span> </template> <el-menu-item v-for="childThree in child.children" :index="childThree.path" :key="childThree.path"> <i :class="childThree.meta.icon"></i> <span>{{childThree.name}}</span> </el-menu-item> </el-submenu> <el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden && !child.leaf" :key="child.path"> <i :class="child.meta.icon"></i> <span>{{child.name}}</span> </el-menu-item> </el-submenu> </template> </el-menu> </div> </template> <script> export default { data(){ return { } }, computed:{ routes() { return this.$router.options.routes console.log(routes) }, }, } </script>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061'

4、路由配置（公共组件在头部引入，各模块组件按需引入）

import Vue from 'vue' import Router from 'vue-router' import LayOut from '@/components/common/LayOut' import AppMain from '@/components/common/AppMain' Vue.use(Router) export default new Router({ mode: 'history', routes: [{ path: '/', hidden:true,//不在导航列表中显示 component: LayOut, redirect: '/menu1', //当路由未匹配时重定向，可作初始化显示页面设置 }, { path: '/menu1', component: LayOut, name: 'menu1', leafThree:true,//有三级路由 meta: { title: 'menu1', icon: 'fa fa-paper-plane' }, children: [ { path: '/menu1-1', name: 'menu1-1', meta: { title: 'menu1-1', icon: 'fa fa-paper-plane' }, component:AppMain, leaf:true,//有二级路由 children:[ { path: '/menu1-1-1', name: 'menu1-1-1', meta: { title: 'menu1-1-1', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu1/menu1-1-1.vue'], resolve), }, { path: '/menu1-1-2', name: 'menu1-1-2', meta: { title: 'menu1-1-2', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu1/menu1-1-2.vue'], resolve), }, ] }, { path: '/menu1-2', name: 'menu1-2', meta: { title: 'menu1-2', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu1/menu1-2.vue'], resolve), }, ] }, { path: '/menu2', component: LayOut, name: 'menu2', leaf:true,//有二级路由 meta: { title: 'menu2', icon: 'fa fa-paper-plane' }, children: [ { path: '/menu2-1', name: 'menu2-1', meta: { title: 'menu2-1', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu2/menu2-1.vue'], resolve), }, { path: '/menu2-2', name: 'menu2-2', meta: { title: 'menu2-2', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu2/menu2-2.vue'], resolve), }, ] }, { path: '/menu3', component: LayOut, name: 'menu3', redirect:'/menu3-1', meta: { title: 'menu3', icon: 'fa fa-paper-plane' }, children: [ { path: '/menu3-1', name: 'menu3-1', meta: { title: 'menu3-1', icon: 'fa fa-paper-plane' }, component: resolve => require(['@/components/viewers/menu3/menu3-1.vue'], resolve), }, ] }, ] })

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119'

5、各模块组件这里不做介绍，根据需要写入内容，保持路由中引入正确即可