今天就写结合路由去配置左边的菜单
首先在layout的index.vue 我们要获取路由的参数信息
在页面创建的时候 我们获取路由信息打印出来
那么接下来我们就要填充到左边 之前我们把 菜单代码是放在 引用的siderBar里面 现在 我们把代码复制到父类 index.vue
把各个菜单的子类信息 传到到siderBar里面 通过<SiderBar> 组件 提交 各个路由的 信息到siderBar
:default-active="activeMenu"这个是 决定菜单子类的高亮显示 唯一标识 我们是以当前的路径地址 作为标识
子类接受
再来 写子类的代码
第一 路由有hildren ：true 标识的一般都是登录啊 处理错误页面 啊 这些 我们不需要展现出来 那么我们先过滤掉
v-if="item.hidden!==true"接下来就根据element 的代码可以看到 当菜单 只有一个 和 菜单下面还有多个子菜单的 写法不一样
我们就先处理菜单只有一个的 写法
<template v-if="hasOneChild(item)"> <el-menu-item :index="item.redirect"> <i class="el-icon-menu"></i> <span slot="title">{{item.children[0].meta.title}}</span> </el-menu-item> </template>我们根据之前打印的路由数组 去填充 ：index 是 唯一标识 用以点击菜单高亮的 标识 之前也说到了 是匹配当前页面的路径
以我的 为例子 当前路径 /user/index 再看看打印的信息
我们这是填充item.redirect 去匹配当前的高亮
处理好了没有子类的菜单 那么接下来处理 有子类的菜单
显示在外面那一层菜单 根据 element的代码跟一个菜单 一样 做相应的填充
根据打印的信息开始 填充子菜单了
el-menu-item v-for="(it,index) in item.children" :index="basepath+'/'+it.path" :key="index" {{it.meta.title}}我们 v-for 循环 item.children 填充菜单显示的title 紧接着就是处理 ：index 高亮的问题了 之前我们通过index.vue提交给子类的 是 菜单父类的 路径 basepath
可以看到 子类是引用父类的根路径 所以子类我们：index 填充 basepath+‘/’+子类的path 用以匹配高亮显示
最后我们再来浏览一下效果
菜单到这里就完成了 后面菜单会根据代码的开发 优化 调整
今天就先到这里了
总之 遇到打印报红的错误不要着急 结合自己的代码慢慢去 调整
同时有问题也可以联系我
上一篇 https://blog.csdn.net/qq_38127637/article/details/109160086
下一篇
