elementui侧边导航栏,elementui左侧菜单

　　本文主要介绍了ElementUI命名视图实现复杂顶部和左侧导航栏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

　　在了解了命名视图的用途后，发现用命名视图来实现复杂导航更加省力。更多知识请参考这里

　　这里只说明重要配置内容，其他内容配置请参考上一篇初始版本：

　　ElementUI复杂顶部和左侧导航栏实现

　　或参考文末提到的开源代码库上的项目代码。

　　项目目录如下：

　　1、路由器配置（路由器/index.js)如下：

　　从“vue”导入某视频剪辑软件

　　从“vue路由器"导入路由器

　　从@/components/nav/topNav.vue 导入顶导航

　　从@/components/nav/leftNav.vue 导入左侧导航

　　从" @/views/home.vue "导入个人主页

　　从@/视图/工作台/仪表板。vue导入仪表板

　　从" @/视图/工作台/我的设置。vue "导入我的设置

　　从@/视图/工作台/任务/使命。vue导入任务

　　从@/视图/工作台/计划. vue 导入计划

　　从@/views/workbench/maillist.vue 导入邮件列表

　　从" @/views/enterprise/index.vue "导入企业列表

　　从" @/views/enterprise/add.vue "导入EnterpriseAdd

　　从" @/views/enterprise/detail.vue "导入企业详细信息

　　从" @/views/enterprise/validate。vue "导入企业验证

　　从@/views/vehicle/index.vue 导入车辆管理

　　从" @/views/dept/index.vue "导入DeptManager

　　Vue.use(路由器)

　　让路由器=新路由器({

　　路线：[

　　{

　　路径："/",

　　类型： home ，//根据类型区分不同模块（顶部导航)

　　名称：家,//根据名字区分不同子模块（左侧导航)

　　重定向："/仪表板",

　　成分：家，

　　儿童：[

　　{

　　路径："/仪表板",

　　名称： 首页, //当前路由的姓名（导航栏显示文字)

　　组件：{

　　默认：仪表板，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：真的，//只有一个节点

　　iconCls: iconfont icon-home ，//图标样式班级

　　菜单显示：没错

　　},

　　{

　　路径："/mySet "，

　　组件：{

　　默认值：我的设置，

　　top: TopNav，

　　旁白：左导航

　　},

　　名称： 我的设置，

　　图标：“el图标菜单，

　　没错，

　　儿童：[

　　{路径：/mySet/plan ，组件：计划，名称：行程计划，menuShow: true }，

　　{路径：/mySet/mission ，组件：任务，名称：我的任务，menuShow: true }，

　　{路径："/mySet/Maillist "，组件：邮件列表，名称： 通讯录，menuShow: true }

　　]

　　}

　　]

　　},

　　{

　　路径："/enterpriseManager "，

　　类型："企业",

　　名称：企业，

　　成分：家，

　　重定向："/企业/列表",

　　没错，

　　儿童：[

　　{

　　路径："/企业/列表",

　　名称： 企业信息，

　　组件：{

　　默认：企业列表，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：没错，

　　iconCls:"El图标设置",

　　菜单显示：没错

　　},

　　{

　　路径："/企业/详细信息",

　　名称： 企业详情，

　　组件：{

　　默认：企业详细信息，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：没错，

　　iconCls:"El图标设置",

　　菜单显示：错误

　　},

　　{

　　路径："/企业/添加"，

　　名称： 添加企业，

　　组件：{

　　默认值：EnterpriseAdd，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：没错，

　　图标：“el图标菜单，

　　菜单显示：没错

　　},

　　{

　　路径："/企业/验证"，

　　名称： 企业认证，

　　组件：{

　　默认值：EnterpriseValidate，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：没错，

　　图标：“el图标菜单，

　　菜单显示：没错

　　}

　　]

　　},

　　{

　　路径："/vehicleManager "，

　　类型："企业",

　　名称：车辆，

　　成分：家，

　　重定向："/车辆/列表",

　　没错，

　　儿童：[

　　{

　　路径："/车辆/列表",

　　名称： 车辆信息，

　　组件：{

　　默认：车辆管理，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：真的，//只有一个节点

　　iconCls: iconfont icon-home ，//图标样式班级

　　菜单显示：没错

　　}

　　]

　　},

　　{

　　路径："/deptManager "，

　　类型："企业",

　　姓名：部门，

　　成分：家，

　　重定向："/部门/列表",

　　没错，

　　儿童：[

　　{

　　路径："/部门/列表",

　　名称： 部门信息，

　　组件：{

　　默认值：DeptManager，

　　top: TopNav，

　　旁白：左导航

　　},

　　叶子：真的，//只有一个节点

　　iconCls: iconfont icon-home ，//图标样式班级

　　菜单显示：没错

　　}

　　]

　　}

　　]

　　});

　　特别说明：

　　这里的路由对象路由器，设置的是最多三级，一级路由主要对应的是顶部导航和其他无子页面的路由，二级和三级路由分别对应的是左侧导航的一级和二级菜单（比如三级路由对应的就是左侧导航的二级菜单),二级路由设置叶子属性，值为真实的表明该路由下没有子菜单（如果该路由下的某页面不显示在左侧导航，不算子菜单)。

　　2、home.vue，这里分别有name=顶部，侧面，默认三个视图，顶部代表顶部导航，先不说代表左侧导航，剩下的系统默认值就是默认视图，代表右侧内容区

　　模板

　　el-row class=container

　　！-头部-

　　El-col:span= 24 router-view name= top /router-view/El-col

　　el-col :span=24 class=main

　　！-左侧导航-

　　路由器视图名称=侧边/路由器视图

　　！-右侧内容区-

　　section class=内容容器

　　div class=网格内容背景-紫色光

　　El-col:span= 24 class= content-wrapper

　　过渡名称=渐变模式=出-入

　　路由器视图/路由器视图

　　/过渡

　　/el-col

　　/div

　　/部分

　　/el-col

　　/el-row

　　/模板

　　脚本

　　导出默认值{

　　姓名：家，

　　data () {

　　返回{

　　加载：假

　　}

　　}

　　}

　　/脚本

　　3、topNav.vue是顶部导航菜单的代码

　　模板

　　el-row class=container

　　！-头部-

　　El-col:span= 24 class= top bar-wrap

　　div class=顶栏-徽标顶栏-BTN

　　a href=/ rel=外部nofollow rel=外部nofollow img src=././资产/徽标。png style= padding-left:8px；/a

　　/div

　　div class=topbar-logos

　　a href=/ rel=外部不跟随 rel=外部不跟随 style= color:# fff；车车综合管理/a

　　/div

　　div class=topbar-title

　　！-注意：这里就是topNavState作用之处，根据当前路由所在根路由的类型值判断显示不同顶部导航菜单-

　　El-row v-show= $ store。状态。topnavstate=== home

　　el-col :span=24

　　El-menu:default-active= defaultActiveIndex class= El-menu-demo mode= horizontal @ select= handle select :router= true

　　埃尔菜单项索引=/工作台/El-菜单项

　　埃尔-菜单项索引=/enterpriseManager 企业管理/El-菜单项

　　埃尔-菜单项索引=/orderManager 订单管理/El-菜单项

　　埃尔-菜单项索引=/systemManager 系统管理/El-菜单项

　　/el-menu

　　/el-col

　　/el-row

　　El-row v-show= $ store。状态。topnavstate===企业

　　el-col :span=24

　　El-menu:default-active= defaultActiveIndex class= El-menu-demo mode= horizontal @ select= handle select :router= true

　　埃尔-菜单项索引=/enterpriseManager 企业信息/El-菜单项

　　埃尔-菜单项索引=/vehicleManager 车辆信息/El-菜单项

　　埃尔菜单项索引=/deptManager 组织架构/El-菜单项

　　/el-menu

　　/el-col

　　/el-row

　　/div

　　div class=顶部栏-帐户顶部栏-BTN

　　埃尔-下拉触发器=点击

　　span class= El-drop down-link userinfo-inner

　　I class= icon font icon-user /I { {昵称} } I class=" El-icon-caret-bottom "/I/span

　　El-下拉菜单-菜单slot=dropdown

　　埃尔-下拉列表-项目

　　 div @ click=跳转到(/user/profile ) span style= color:# 555；字体大小：14px个人信息/span/div

　　/El-下拉列表项

　　埃尔-下拉列表-项目

　　div @ click=跳转到(/user/change pwd ) span style= color:# 555；字体大小：14px修改密码/span/div

　　/El-下拉列表项

　　El-下拉菜单-项目划分@ click。native= logout 退出登录/El-下拉列表项

　　/El-下拉菜单

　　/El-下拉菜单

　　/div

　　/el-col

　　/el-row

　　/模板

　　脚本

　　导入“元素-ui/lib/主题-粉笔/显示。CSS”；

　　从导入{路}././road.js

　　导出默认值{

　　data(){

　　返回{

　　加载：假，

　　公司名称： ,

　　昵称： ,

　　defaultActiveIndex:"/"，

　　homeMenu: false，

　　邮件计数：5

　　}

　　},

　　已创建(){

　　路在( setNickName ，(text)={

　　this.nickname=文本

　　});

　　路在( goto ，(url)={

　　if(url===/login) {

　　本地存储。删除项目(“access-user”)；

　　这个10.99 $ router . push(网址);

　　}

　　});

　　//组件创建完后获取数据

　　这个。fetchnavdata()；

　　},

　　方法：{

　　跳转到(url){

　　这个10.99 $ router . push(网址);//用去刷新

　　},

　　手柄选择(索引){

　　this.defaultActiveIndex=index

　　},

　　fetchNavData () { //初始化菜单激活项

　　设cur_path=this .$ route.path//获取当前路由

　　让路由器=这个1000美元路由器。选项。路线；//获取路由对象

　　设导航类型="",导航名称="";

　　for(var I=0；我路由器。长度；i ) {

　　让孩子=路由器[我].儿童；

　　如果（孩子){

　　对于(设j=0；j儿童。长度；j ) {

　　如果(儿童[j]。path===cur_path) {

　　导航类型=路由器[我].类型；

　　nav_name=routers[i].姓名；

　　打破；

　　}

　　//如果该菜单下还有子菜单

　　如果(儿童[j]。儿童){

　　让孙子辈=子女[j]的缩写.儿童；

　　对于(设z=0；z孙辈。长度；z ) {

　　如果（孙辈[z]的缩写.path===cur_path) {

　　导航类型=路由器[我].类型；

　　nav_name=routers[i].姓名；

　　打破；

　　}

　　}

　　}

　　}

　　}

　　}

　　这个100美元商店。状态。topnavstate=nav _ type

　　这个100美元商店。状态。左导航状态=导航名称；

　　if(nav_type==home){

　　这个。defaultactiveindex=“/”；

　　}否则{

　　这个。defaultactiveindex=/ nav _ name 管理器；

　　}

　　},

　　注销(){

　　//注销

　　这个. $确认(确认退出吗？, 提示, {

　　确认按钮类别：“El-button-warning”

　　}).然后(()={

　　//确认

　　本地存储。删除项目(“access-user”)；

　　路. emit(goto ，/log in )；

　　}).catch(()={ })；

　　}

　　},

　　已安装(){

　　让用户=窗口。本地存储。getitem( access-user )；

　　如果（用户){

　　user=JSON.parse(用户);

　　这个。昵称=用户。昵称 “”；

　　这个。公司名称=用户。公司名称 “”；

　　}

　　},

　　观察：{

　　$route: function(to，from){ //路由改变时执行

　　//控制台。信息(收件人。路径：到。路径’)；

　　这个。fetchnavdata()；

　　}

　　}

　　}

　　/脚本

　　注意fetchNavData()这个方法，主要是根据当前跳转的路由，去找到这个路由对应的类型（对应顶部导航栏的分类)和姓名（对应左侧导航栏的分类),然后保存类型和名字到$store中，这样在topNav.vue组件可以根据$store中的类型显示相应的菜单，同样在leftNav.vue组件就可以取到这个名字值并显示相应的左侧菜单栏了。另外，里面的顶端和在旁边是命名视图，分别对应顶部导航组件和左侧导航组件。

　　补充：topNavState和leftNavState这两个状态就是精髓所在，分别控制顶部和左侧导航展示对应模块菜单，这两个状态是在状态管理配置文件商店。射流研究…中设置的

　　从“vue”导入某视频剪辑软件

　　从" vuex "导入状态管理

　　Vue.use(Vuex)

　　常量状态={

　　collapsed: false，//左侧导航折叠状态

　　topNavState: home ，

　　左导航状态："调度"

　　}

　　导出默认的新Vuex .商店({

　　状态

　　})

　　商店。射流研究…文件在主页。射流研究…中引入：

　　从导入存储 store.js

　　新Vue({

　　路由器，

　　店，

　　埃尔： #app ，

　　render: h=h(App)

　　})

　　4、leftNav.vue左侧导航栏（这里的左侧菜单栏最多有两级菜单)

　　模板

　　！-左侧导航-

　　旁白：class={showSidebar:已折叠}

　　！-展开折叠开关-

　　div class=菜单切换 @ click。防止=崩溃

　　 icon font icon-outdent v-show=！已折叠title=收起/i

　　 I class= icon font icon-indent v-show= collapsed title=展开/i

　　/div

　　！-导航菜单-

　　El-menu:default-active= $ route。path 路由器：collapse= collapsed ref=左侧导航

　　$router.options.routes中的模板v-for=(问题，索引

　　！-注意：这里就是leftNavState状态作用之处，当该值与路由器的根路由的名字相等时加载相应菜单组-

　　模板v-if=问题。name===$ store。状态。左导航状态

　　模板v-for=(item，index) in issue.children

　　埃尔-子菜单v-if=！项目。 leaf :index= index v-show= item。菜单显示

　　模板slot= title I:class= item。icon cls /ispan slot= title { item。名称} }/span/模板

　　El-菜单项v-for= term in item。 children :key= term。“path”:index=“term。path v-if= term。菜单显示

　　:class=$route.path==term.path？是活动的:

　　我：学期。icon cls /ispan slot= title { term。name } }/span

　　/El-菜单项

　　/El-子菜单

　　El-菜单项v-else-if= item。 leaf :index= item。路径

　　:class=$route.path==item.path？is-active : v-show= item。菜单显示

　　I:class= item .icon cls /ispan slot= title { item。name } }/span

　　/El-菜单项

　　/模板

　　/模板

　　/模板

　　/el-menu

　　/抛开

　　/模板

　　脚本

　　导出默认值{

　　名称：左导航，

　　data () {

　　返回{

　　加载：假，

　　崩溃了：这个. store.state .崩溃了，

　　}

　　},

　　方法：{

　　//折叠导航栏

　　折叠：函数(){

　　this.collapsed=！这。倒塌了；

　　这个100美元商店。状态。塌了=这个。崩溃了；

　　},

　　//左侧导航栏根据当前路径默认打开子菜单（如果当前是二级菜单，则父级子菜单默认打开)

　　defaultLeftNavOpened () {

　　设cur_path=this .$ route.path//获取当前路由

　　让路由器=这个1000美元路由器。选项。路线；//获取路由对象

　　设subMenuIndex="，needOpenSubmenu=false

　　对于(设I=0；我路由器。长度；i ) {

　　让孩子=路由器[我].儿童；

　　如果（孩子){

　　对于(设j=0；j儿童。长度；j ) {

　　如果(儿童[j]。path===cur_path) {

　　打破；

　　}

　　//如果该菜单下还有子菜单

　　如果(儿童[j]。孩子！儿童[j]的缩写.叶子){

　　让孙子辈=子女[j]的缩写.儿童；

　　对于(设z=0；z孙辈。长度；z ) {

　　如果（孙辈[z]的缩写.path===cur_path) {

　　子菜单索引=j；

　　needOpenSubmenu=true

　　打破；

　　}

　　}

　　}

　　}

　　}

　　}

　　如果（这个. refs[左导航]needOpenSubmenu){

　　这个refs[leftNavigation].打开(子菜单索引);//打开子菜单

　　}

　　},

　　},

　　观察：{

　　$route: function(to，from){ //路由改变时执行

　　//控制台。信息(收件人。路径：到。路径’)；

　　}

　　},

　　已安装(){

　　这个。defaultleftnavopened()；

　　},

　　}

　　/脚本

　　5、如果左侧导航含有二级菜单，

　　比如"我的设置(/mySet)"中，含有三个子菜单：

　　路由配置如下：(具体文件路径及配置请看router/index.js)

　　{

　　路径："/mySet "，

　　组件：{

　　默认值：我的设置，

　　top: TopNav，

　　旁白：左导航

　　},

　　名称： 我的设置，

　　图标：“el图标菜单，

　　没错，

　　儿童：[

　　{路径：/mySet/plan ，组件：计划，名称：行程计划，menuShow: true }，

　　{路径：/mySet/mission ，组件：任务，名称：我的任务，menuShow: true }，

　　{路径："/mySet/Maillist "，组件：邮件列表，名称： 通讯录，menuShow: true }

　　]

　　}

　　此时，我们只需在父级菜单对应视图（我的设置)中添加一个路由器视图即可：

　　模板

　　路由器视图/路由器视图

　　/模板

　　6、整体效果图：

　　附上开源代码库地址：https://github。com/yqrong/vv项目

　　到此这篇关于ElementUI命名视图实现复杂顶部和左侧导航栏的文章就介绍到这了，更多相关元素顶部和左侧导航栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。