建新页面2.

在之前的Aside.vue中去实现代码一级菜单其实非常的简单直接用el-menu

和el-menu-item

templateel-menuel-menu-item一级菜单1/el-menu-itemel-menu-item一级菜单2/el-menu-itemel-menu-item一级菜单3/el-menu-item/el-menu

/templatescript

属性但是必须在需要生效的子菜单中设置index属性否则不生效先不设置index

设置default-active为对应的index值即可比如我设置默认选中第2个菜单第2个菜单的index为2所以我们在el-menu中加入

default-active“2”

templateel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2el-menu-item

index1i

classel-icon-location/i一级菜单1/el-menu-itemel-menu-item

index2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu

/templatescript

text-color#ffffffactive-text-color#ffd04b

default-active2

classel-icon-location/ispan一级菜单1/span/templateel-menu-item

index1-1选项1/el-menu-itemel-menu-item

index1-2选项2/el-menu-item/el-submenuel-menu-item

index2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu/div修改步骤

el-menu

由于之前挖过一个坑就是global.css里面的height之前也提到过所以要设置一下el-submenu的高度具体的参考代码

templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2el-submenu

index1template

classel-icon-location/ispan一级菜单1/span/templateel-menu-item

index1-1选项1/el-menu-itemel-menu-item

index1-2选项2/el-menu-item/el-submenuel-menu-item

index2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu/div

/templatescript

templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2el-submenu

index1template

classel-icon-location/ispan一级菜单1/span/templateel-submenu

index1-1template

classel-icon-location/ispan选项1/span/templateel-menu-item

index1-1-1i

classel-icon-document/i选项1-1/el-menu-itemel-menu-item

index1-1-2i

classel-icon-document/i选项1-2/el-menu-item/el-submenuel-submenu

index1-2template

classel-icon-location/ispan选项2/span/templateel-menu-item

index1-2-1i

classel-icon-setting/i选项2-1/el-menu-itemel-menu-item

index1-2-2i

classel-icon-setting/i选项2-2/el-menu-item/el-submenu/el-submenuel-menu-item

index2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu/div

/templatescript

templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2openhandleOpenclosehandleCloseselecthandSelectel-submenu

index1template

classel-icon-location/ispan一级菜单1/span/templateel-submenu

index1-1template

classel-icon-location/ispan选项1/span/templateel-menu-item

index1-1-1i

classel-icon-document/i选项1-1/el-menu-itemel-menu-item

index1-1-2i

classel-icon-document/i选项1-2/el-menu-item/el-submenuel-submenu

index1-2template

classel-icon-location/ispan选项2/span/templateel-menu-item

index1-2-1i

classel-icon-setting/i选项2-1/el-menu-itemel-menu-item

index1-2-2i

classel-icon-setting/i选项2-2/el-menu-item/el-submenu/el-submenuel-menu-item

index2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu/div

/templatescript

router/index.js创建了主路由index就是进入的主页面这3个index子路由用来跳转分别对应

main1、main2、main3

几个页面。

子路由的跳转位置为index的Main位置因为我们管理系统只需要Main位置发生改变头部、左边导航、下方footer是不需要改变的。

安装路由

vue2搭配vue-router3vue3搭配vue-router4

router/index.js代码如下

import(/components/Main/Main1.vue)},{path:

import(/components/Main/Main2.vue)},{path:

import(/components/Main/Main3.vue)}]}

]const

router;在原来的Index.vue页面设置路由跳转位置这里我们在原来的Main

/位置修改位

这里我们使用一级菜单简单方便修改Aside/index.vue的代码。

在el-menu里面加入

代码参考如下

100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-menu-item

index/index/menu1i

classel-icon-location/i一级菜单1/el-menu-itemel-menu-item

index/index/menu2i

classel-icon-document/i一级菜单2/el-menu-itemel-menu-item

index/index/menu3i

classel-icon-setting/i一级菜单3/el-menu-item/el-menu/div

/templatescript

在子路由中添加一个新的路由用来默认跳转在主路由中配置redirect

值为这个子路由

index/Main,//路由嵌套children:[{path:

import(/components/Main/index.vue)},{path:

import(/components/Main/Main1.vue)},{path:

import(/components/Main/Main2.vue)},{path:

import(/components/Main/Main3.vue)}]}

]const

其实就是一个重定向的操作当直接输入index路由时就会默认跳转到Main路由里面这样就会有个默认的页面了。

“/Main”直接重定向了同时Main窗口的页面也显示了我们指定的页面。

五、动态左侧菜单导航

在项目中比较多见的是会将菜单存储到后台的数据库中通过返回数据来决定菜单的模样并不是由前端来控制菜单的模样所以就来实现动态的菜单导航根据后台数据来生成菜单导航。

1、动态实现一级菜单

index“/index/menu1”一级菜单1/el-menu-item

index

路由路径、图标名、菜单名等几个属性然后以循环的方式来输出这个菜单。

实现代码

100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-menu-item:indexitem.pathv-foritem

:classitem.icon/i{{

/style菜单数据menu_data包含3个元素每个元素分别有name、icon和path属性这个三个属性分别对应菜单名、图标、路由的路径。

使用v-for循环menu_data填入对应的属性就可。

2、动态实现二级菜单

child也是一个数组包含多个元素每个元素分别有name、icon和path属性这个三个属性分别对应菜单名、图标、路由的路径。

参考代码

100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-submenu

:indexitem.path

}}/span/templateel-menu-item:indexchild.pathv-forchild

:classchild.icon/i{{

}}/el-menu-item/el-submenu/el-menu/div

/templatescript