vue elementui navmenu 多级导航菜单(水平、垂直) |
您所在的位置：网站首页 › vue下拉菜单箭头滚动 › vue elementui navmenu 多级导航菜单(水平、垂直) |
vue elementui navmenu 多级导航菜单(水平、垂直)
|
大家好，又见面了，我是你们的朋友全栈君。 文章目录vue elementui navmenu 多级导航菜单路由跳转(一)组件（NavMenu.vue）调用（app.vue）路由跳转(二)水平效果图区别问题1 刷新页面2 非最后一层,点击可跳转路由3 水平菜单点击多路由时，有轮廓4 刷新不折叠导航5 水平菜单过长，可滚动6 垂直菜单过长，可滚动vue elementui navmenu 多级导航菜单路由跳转(一)el-menu标签中的router参数 说明 类型 可选值 默认值 router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 boolean — false 组件(NavMenu.vue) 中的路由跳转,:index="navMenu.entity.name" :default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值 此时菜单数据中的value 没有用到,可以删除。  在这里插入图片描述注意路由变化 组件（NavMenu.vue）代码语言：javascript复制 { {navMenu.entity.alias}} { {navMenu.entity.alias}} export default { name: 'NavMenu', props: ['navMenus'], data() { return { } }, methods: { } } 调用（app.vue）代码语言：javascript复制 import NavMenu from "./components/NavMenu.vue"; export default { components: { NavMenu: NavMenu }, data() { return { activeIndex: 'aa', menuData: [ { //一级 entity: { id: 0, name: "aa", icon: "el-icon-message", alias: "一级菜单" } }, { //一级 entity: { id: 1, name: "systemManage", icon: "el-icon-message", alias: "两级菜单" }, //二级 childs: [ { entity: { id: 3, name: "authManage", icon: "el-icon-loading", alias: "权限管理", value: { path: "/hello" } } }, { entity: { id: 4, name: "roleManage", icon: "el-icon-bell", alias: "角色管理", value: "/system/role" } }, { entity: { id: 2, name: "menuManage", icon: "el-icon-edit", alias: "菜单管理", value: "/system/menu" } }, { entity: { id: 5, name: "groupManage", icon: "el-icon-mobile-phone\r\n", alias: "分组管理", value: "/system/group" } } ] }, { //一级 entity: { id: 6, name: "userManage", icon: "el-icon-news", alias: "三级菜单" }, //二级 childs: [ { entity: { id: 7, name: "accountManage", icon: "el-icon-phone-outline\r\n", alias: "帐号管理", value: "" }, //三级 childs: [ { entity: { id: 14, name: "emailManage", icon: "el-icon-sold-out\r\n", alias: "邮箱管理", value: "/content/email" } }, { entity: { id: 13, name: "passManage", icon: "el-icon-service\r\n", alias: "密码管理", value: "/content/pass" } } ] }, { entity: { id: 8, name: "integralManage", icon: "el-icon-picture", alias: "积分管理", value: "/user/integral" } } ] }, { //一级 entity: { id: 40, name: "contentManage", icon: "el-icon-rank", alias: "四级菜单" }, //er级 childs: [ { entity: { id: 41, name: "classifyManage2", icon: "el-icon-printer", alias: "分类管理" }, //三级 childs: [ { entity: { id: 42, name: "classifyManage3", icon: "el-icon-printer", alias: "分类管理" }, //四级 childs: [ { entity: { id: 43, name: "classifyManage4", icon: "el-icon-printer", alias: "分类管理", value: "/content/classify" } } ] } ] } ] } ] }; } }; 路由跳转(二)Menu-Item Attribute参数 说明 类型 可选值 默认值 route Vue Router 路径对象 Object — — 此方法要同时设置,否则无效 组件(NavMenu.vue) 中的路由跳转,:route="navMenu.entity.value" :index="navMenu.entity.name"只是唯一标识,与:default-active="activeIndex"中的activeIndex是对应的 NavMenu.vue的 |
【本文地址】
今日新闻 |
推荐新闻 |