在这个示例中,我们设置 defaultActiveIndex 为'1-1',表示默认选中第一个子菜单项。当页面加载时,el-menu 会自动将索引为 '1-1' 的菜单项设置为选中状态。 如果你使用的是 vue-router,并且希望根据当前路由自动设置选中项,你可以启用 router 属性,并移除 default-active 属性: vue <el-menu class="el-me...
设置el-menu的 :active=”adminleftnavnum”,这样基本上就可以实现该效果了。 1、引入扩展库 要使用公共变量,我们先引入vue.js的状态管理扩展vuex。 importVuexfrom'vuex' Vue.use(Vuex) 2、注册新Store conststore=newVuex.Store({ state:{ count:0, adminleftnavnum:"1"//管理后台左侧导航 }, mutations:{...
el-menu 设置选中状态的项目的颜色和背景色及动态设置菜单图标及全屏的关键:height: 100vh <template><el-menudefault-active="/home/root"routertext-color="#ffffff"active-text-color="#ff0000"background-color="#191970"><el-menu-itemindex="/home/root"><el-icon><component:is="data[2].com"></...
<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"background-color="#bd1e22"text-color="#fff"active-text-color="#ffd04b">//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径/...
</el-menu> data(){return{activeIndex:'/device_new/',title:'设备管理'} },mounted() {this.activeIndex=this.$route.path}, 情况二:嵌套路由,当选中子路由时父级菜单要高亮显示,单前选中菜单也是被选中的颜色;(如下图) 当选中版本管理时,版本管理的被选中,同时父级菜单“系统配置”也将高亮显示; ...
(1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" ...
1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 {path:"/companyinfo",name:"companyinfo",component:()=>import(/* webpackChunkName: "companyinfo" */"../views/CompanyInfo.vue"), ...
在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。
<el-menu ref="elMenu"> 当我们当即1按钮时, 打印 this.$refs.elMenu 可以看到如下的数据 1576464541834.jpg 废话不多说,直接上代码: // 折叠当前展开的菜单栏。 this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]) // 取消菜单栏的当前选中状态。
使用element中的el-menu时候,我们使用路由高亮显示的时候,使用router 模式和default-active 当我们点击左侧菜单栏中的子路由时候,页面路由发生变化,左侧路由的选中状态就会消失,不会仍然保持选中。 我们可以通过route.matched来寻找当前子路由的上机路由, route.matched含义是与给定路由地址匹配的标准化的路由记录数组。就是...