官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
解决方案 由如下代码可知,<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-col...
default-active属性在el-menu组件中的作用: default-active属性用于控制菜单项在初始化时的激活状态。这对于创建导航菜单特别有用,因为它可以帮助用户快速识别当前所在的页面或导航部分。如何在Vue3的el-menu组件中设置default-active属性的示例代码: vue <template> <el-menu :default-active="active...
Bug Type: Component Environment Vue Version: 3.4.21 Element Plus Version: 2.7.7 Browser / OS: windows 10 Build Tool: Vite Reproduction Related Component el-menu Reproduction Link Element Plus Playground Steps to reproduce 点击菜单观察控制台active...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" ...
activeIndex: '/' }; }, methods: { handleMenuSelect(index) { this.activeIndex = index; } } }; </script> ``` 2.手动激活: 你也可以手动设置菜单项的激活状态,通过绑定`:default-active`属性或者通过设置`is-active`属性。这样,当菜单项满足激活条件时,`is-active`样式将会生效。 ```html <templa...
然后在menu组件上设置default-active的值为:$route.name,这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图: 通过这样设置,就可以实现刷新页面时,导航栏的选中项和页面显示一致,并且从b页面跳转到c页面时,还能保持b选中的...
在el-menu组件里有这样一个属性,default-active用来表示当前激活菜单的 index 1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> ...
<el-menu :default-active="$route.path"></el-menu> 2、稍微麻烦一些: (1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu ...
比如右边即Users.vue有个面包屑导航区代码如下,结合下面的路由配置,可知点击首页会跳转到路由/wellcome,但是用户列表仍然处于激活状态【问题】<el-menu>的active-text-color="#ffd04b"属性规定了菜单项激活时的颜色,由于用户列表是激活的,颜色是激活状态的颜色。那么如何改变激活状态呢?