情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
el-menu 实现路由需要添加router :default-active="$route.path" index="/bar" <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" :collapse="isCollapse" router :default-active="$route.path" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <...
背景介绍:项目中使用element-ui时,菜单menu2根据show的值决定是否显示。show 默认为false,请求接口后可能为true 问题:show为true时,点击菜单menu2后,active menu 菜单的样式与当前路由不匹配 解决办法:v-if="show"改为v-show="show" 原因分析:v-if 在初始值为false时,不渲染。v-show 都会渲染,show为false时...
由如下代码可知,<el-menu-item :index="child.path"中path表示点击时激活的路由,而我们现在做的是要同步以下路由,我们要改变的是<el-menu>的:default-active="activePath"属性 <el-menu:uniqueOpened="true"class="el-menu-vertical-demo"text-color="#fff"background-color="#272727"active-text-color="#ffd...
导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 1<el-menu2:default-active="activeIndex"3class="el-menu-demo...
default-active属性设置 确保default-active属性的值是一个字符串,且该字符串与某个el-menu-item的:index属性值完全匹配。例如: html <el-menu :default-active="activeIndex"> <el-menu-item :index="'1'">首页</el-menu-item> <el-menu-item :index="'2'">产品</...
。如上图所示，当前页面应该是数据分析，路由地址是/analyse，但是刷新页面之后，菜单栏却变成了首页，这是因为default-active默认值设置的是‘/’2、此时只需要绑定动态属性default-active，利用watch来监听路由变化，并赋值给default-active 绑定属性 使用watch监听路由变化 ...
- default-active:设置默认选中的菜单项。 - unique-opened:是否只保持一个子菜单展开。 - router:是否开启路由模式,如果开启,点击菜单项会自动触发路由跳转。 下面是使用el-menu的示例代码: html <el-menu :default-active="activeIndex" mode="horizontal" router> <el-menu-item index="home">首页</el-menu...
<template><divclass="homeBox"><divclass="left"><divclass="leftNav"><el-menu:default-active="activeIndex"class="elMenu"background-color="#333"text-color="#B0B0B2"active-text-color="#fff"@open="handleOpen"@close="handleClose":unique-opened="true"router><el-menu-itemindex="eatOut"><...
否则组件就会被循环引用最终出现“max stack size exceeded”的错误。10 注意事项：1，刷新定位当前路由，需要在el-menu标签中定义:default-active="$route.path"，这样当你刷新路由时就会自动定位但当前的路由位置。2，el-submenu和el-menu-item标签中的index属性定义，需要解析下路由将要跳转的路由赋给index。