element ui 菜单,elementui动态菜单
本文主要详细介绍了vue.js在Element-ui中实现的导航菜单。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue.js使用Element-ui实现导航菜单的具体代码，供大家参考。具体内容如下
之所以这么写，是因为当时写这个函数的时候，element只有一个效果，功能没有实现。当时我很迷茫。
先放图。
我先说一下实现的大致思路，不然下面的代码片段看起来很蠢，圈起来的左右部分，左边部分可以通过复制element来实现，右边部分是跳转子组件。
首先创建导航菜单的vue文件，但是这个文件只介绍了组件，使用容器布局容器实现左右部分。将导航菜单的组件放在左侧el-aside标签中，在右侧el-main标签中写入router-view/router-view，实现路由跳转。
我将导航菜单文件命名为Elnav.vue
模板
div class=" app "
el容器
El-side
导航菜单/导航菜单
/El-旁白
埃尔梅因
路由器视图/路由器视图
/el-main
/El-容器
/div
/模板
脚本
从导入导航菜单。/navmenu
导出默认值{
data() {
返回{
}
},
组件：{
导航菜单
}
}
/脚本
样式范围
/风格
主要介绍navmenu组件(navmenu组件是elemet中的样式)
在导航菜单中
注意设置default-active=$route.path 和组件跳转的索引值(选项一/二)
模板
差异
el-row
埃尔-科尔
el菜单
default-active=$route.path
路由器
el-menu-vertical-demo
@open=handleOpen
@close=handleClose
El-子菜单索引=1
模板槽=标题
i class=el-icon-location/i
导航1 /span
/模板
El-菜单-项目-组
模板槽=标题分组一/模板
El菜单项索引=/Elnav/one 选项1/el菜单项
El菜单项索引=/Elnav/two 选项2/el菜单项
/El-菜单项-组
El-menu-item-Group title= Group 2
El菜单项索引=1-3 选项3/el菜单项
/El-菜单项-组
El-子菜单索引=1-4
模板槽=标题选项4/模板
El菜单项索引=1-4-1 选项1/el菜单项
/El-子菜单
/El-子菜单
/el-menu
/el-col
/el-row
/div
/模板
脚本
导出默认值{
方法：{
handleOpen(key，keyPath) {
console.log(key，key path)；
},
handleClose(key，keyPath) {
console.log(key，key path)；
}
},
已安装(){
console.log(这个。$ route)；
}
};
/脚本
风格
/风格
接下来是路由的配置。
{
路径：“/Elnav”，
名称： Elnav ，
组件：()=
导入(./components/Elnav.vue )，
儿童：[
{
路径：/Elnav/one ，
姓名：一，
组件：()=
导入(./components/one . vue’)
},
{
路径：/Elnav/two ，
姓名：二，
组件：()=
导入(./components/two . vue’)
}
]
}
至于右边one.vue等vue文件的内容，自己写就好了。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。