龙岗网站开发建立个公司网站

当前位置： 首页 > news >正文

龙岗网站开发,建立个公司网站,软件开发好做吗,虚拟机安装 wordpress左侧菜单导航 一、一级菜单二、二级菜单三、三级菜单1、加入相关事件 四、菜单点击跳转1. 创建新页面2. 配置路由3. 菜单中加入路由配置4、处理默认的Main窗口为空的情况 五、动态左侧菜单导航1、动态实现一级菜单2、动态实现二级菜单 一、一级菜单 在之前的Aside.vue中去实现… 左侧菜单导航 一、一级菜单二、二级菜单三、三级菜单1、加入相关事件 四、菜单点击跳转1. 创建新页面2. 配置路由3. 菜单中加入路由配置4、处理默认的Main窗口为空的情况 五、动态左侧菜单导航1、动态实现一级菜单2、动态实现二级菜单 一、一级菜单 在之前的Aside.vue中去实现代码一级菜单其实非常的简单直接用el-menu 和el-menu-item 就行Aside.vue代码如下 templateel-menuel-menu-item一级菜单1/el-menu-itemel-menu-item一级菜单2/el-menu-itemel-menu-item一级菜单3/el-menu-item/el-menu /templatescript export default {name: Aside, }; /scriptstyle scoped /style设置菜单背景颜色和文字颜色 在el-menu中设置 background-color 和 text-color 属性 设置选中后菜单文字颜色 设置 active-text-color 属性但是必须在需要生效的子菜单中设置index属性否则不生效先不设置index 设置默认的选中菜单 设置default-active为对应的index值即可比如我设置默认选中第2个菜单第2个菜单的index为2所以我们在el-menu中加入 default-active“2” 在菜单中加入图标 用 i 标签即可在菜单名前面加入 i class“el-icon-XXX”XXX是图标的名称。
效果如图所示 一级菜单全部代码 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 export default {name: Aside, }; /scriptstyle scoped .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style二、二级菜单 divel-menu background-color#545c64 text-color#ffffffactive-text-color#ffd04b default-active2 el-submenu index1template slottitlei 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 修改为 el-submenu按钮名称、图标用 template 标签包裹必须加入 slottitle属性否则菜单样式不对。加入新的两个 el-menu-item。 参考代码 由于之前挖过一个坑就是global.css里面的height之前也提到过所以要设置一下el-submenu的高度具体的参考代码 templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2el-submenu index1template slottitlei 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 export default {name: Aside, }; /scriptstyle scoped .el-submenu {height: auto; } .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style三、三级菜单 跟二级菜单的修改方式是一样的就是多加一层 参考代码 templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2el-submenu index1template slottitlei classel-icon-location/ispan一级菜单1/span/templateel-submenu index1-1template slottitlei 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 slottitlei 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 export default {name: Aside, }; /scriptstyle scoped .el-submenu {height: auto; } .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style1、加入相关事件 打开open、关闭close、选择select 3个事件 在el-menu中加入三个事件属性并编写对应的method 全部参考代码 templatedivel-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bdefault-active2openhandleOpenclosehandleCloseselecthandSelectel-submenu index1template slottitlei classel-icon-location/ispan一级菜单1/span/templateel-submenu index1-1template slottitlei 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 slottitlei 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 export default {name: Aside,methods: {handleOpen(key, keyPath) {console.log(打开, key, keyPath);},handleClose(key, keyPath) {console.log(关闭, key, keyPath);},handSelect(key, keyPath) {console.log(选择, key, keyPath);},}, }; /scriptstyle scoped .el-submenu {height: auto; } .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style四、菜单点击跳转 当点击菜单项能够在右边的Main窗口中显示对应的页面。 1. 创建新页面 在 Main/ 文件夹下创建三个页面如图所示 代码如下: templatediv这是Main1/div /templatescriptexport default {name: Main1} /scriptstyle scoped /style2. 配置路由 安装配置路由在src下创建 router/index.js创建了主路由index就是进入的主页面这3个index子路由用来跳转分别对应 main1、main2、main3 几个页面。子路由的跳转位置为index的Main位置因为我们管理系统只需要Main位置发生改变头部、左边导航、下方footer是不需要改变的。 安装路由 npm install vue-router3.5.2注意 vue2搭配vue-router3vue3搭配vue-router4 在main.js中注册router让路由生效
router/index.js代码如下 import VueRouter from vue-router import Index from /components/Index;const routes [//一级路由{path: /index,name: index,component: Index,//路由嵌套children:[{path: /index/menu1,component: () import(/components/Main/Main1.vue)},{path: /index/menu2,component: () import(/components/Main/Main2.vue)},{path: /index/menu3,component: () import(/components/Main/Main3.vue)}]} ]const router new VueRouter({mode:history,routes })export default router;在原来的Index.vue页面设置路由跳转位置这里我们在原来的Main /位置修改位 router-view即可。

1. 菜单中加入路由配置 这里我们使用一级菜单简单方便修改Aside/index.vue的代码。在el-menu里面加入 router属性在el-menu-item 的index设置对应的子路由 代码参考如下 templatediv styleheight: 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 export default {name: Aside, }; /scriptstyle scoped .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style我们进入index主路由发现页面是空的 点击左侧导航菜单就会有对应的页面内容
   4、处理默认的Main窗口为空的情况 设置默认的跳转位置设置如下 在子路由中添加一个新的路由用来默认跳转在主路由中配置redirect 值为这个子路由 router/index.js的代码如下 import VueRouter from vue-router import Index from /components/Index;const routes [//一级路由{path: /index,name: index,component: Index,redirect: index/Main,//路由嵌套children:[{path: /index/Main,component: () import(/components/Main/index.vue)},{path: /index/menu1,component: () import(/components/Main/Main1.vue)},{path: /index/menu2,component: () import(/components/Main/Main2.vue)},{path: /index/menu3,component: () import(/components/Main/Main3.vue)}]} ]const router new VueRouter({mode:history,routes })export default router; 其实就是一个重定向的操作当直接输入index路由时就会默认跳转到Main路由里面这样就会有个默认的页面了。 下方我们在地址栏只输入到index敲回车后会在后面默认加上 “/Main”直接重定向了同时Main窗口的页面也显示了我们指定的页面。 五、动态左侧菜单导航 在项目中比较多见的是会将菜单存储到后台的数据库中通过返回数据来决定菜单的模样并不是由前端来控制菜单的模样所以就来实现动态的菜单导航根据后台数据来生成菜单导航。 1、动态实现一级菜单 分析上述代码其中代码 el-menu-item index“/index/menu1”一级菜单1/el-menu-item 是比较相似的不同的地方有3个 index 表示路由的path图标的名称菜单的名称 基于以上几个不同我们可以考虑设置一个数组数组的元素包含 路由路径、图标名、菜单名等几个属性然后以循环的方式来输出这个菜单。 实现代码 templatediv styleheight: 100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-menu-item:indexitem.pathv-foritem in menu_data:keyitem.namei :classitem.icon/i{{ item.name }}/el-menu-item/el-menu/div /templatescript export default {name: Aside,data() {return {menu_data: [{name: 一级菜单1,icon: el-icon-location,path: /index/menu1,},{name: 一级菜单2,icon: el-icon-document,path: /index/menu2,},{name: 一级菜单3,icon: el-icon-setting,path: /index/menu3,},],};}, }; /scriptstyle scoped .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style菜单数据menu_data包含3个元素每个元素分别有name、icon和path属性这个三个属性分别对应菜单名、图标、路由的路径。使用v-for循环menu_data填入对应的属性就可。 2、动态实现二级菜单 在一级菜单的数据对象里面加入 child 属性这个属性也是跟现在的菜单数据menu_data一样的 child也是一个数组包含多个元素每个元素分别有name、icon和path属性这个三个属性分别对应菜单名、图标、路由的路径。 参考代码 templatediv styleheight: 100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-submenu :indexitem.path v-foritem in menu_data :keyitem.nametemplate slottitlei :classitem.icon/ispan{{ item.name }}/span/templateel-menu-item:indexchild.pathv-forchild in item.child:keychild.namei :classchild.icon/i{{ child.name }}/el-menu-item/el-submenu/el-menu/div /templatescript export default {name: Aside,data() {return {menu_data: [{name: 一级菜单1,icon: el-icon-location,path: /index/menu1,child: [{name: 二级菜单1-1,icon: el-icon-user,path: /index/menu11,},{name: 二级菜单1-2,icon: el-icon-user-solid,path: /index/menu12,},],},{name: 一级菜单2,icon: el-icon-document,path: /index/menu2,child: [{name: 二级菜单2-1,icon: el-icon-star-on,path: /index/menu21,},{name: 二级菜单2-2,icon: el-icon-star-off,path: /index/menu22,},],},{name: 一级菜单3,icon: el-icon-setting,path: /index/menu3,child: [{name: 二级菜单3-1,icon: el-icon-s-help,path: /index/menu31,},{name: 二级菜单3-2,icon: el-icon-help,path: /index/menu32,},],},],};}, }; /scriptstyle scoped .el-submenu{height: auto; }.el-icon-help, .el-icon-s-help, .el-icon-star-off, .el-icon-star-on, .el-icon-user-solid, .el-icon-user, .el-icon-location, .el-icon-document, .el-icon-setting {display: inline-flex;align-items: center;justify-content: center; } /style