el-menu导航菜单根据路由变化选中对应项

最新推荐文章于 2024-04-30 17:04:58 发布
原创 最新推荐文章于 2024-04-30 17:04:58 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

博客介绍了Vue中el-menu默认激活项的解决方法，需设置router为true，将:default-active设为 $route.name、 $route.path、 activeIndex等，同时el-menu-item的index属性要与当前路由名称、地址、索引值一一对应，并给出了示例代码。

解决方法：

1、设置router为true

2、:default-active为 $route.name、 $route.path、 activeIndex(待完善取值)，el-menu-item的index属性设置为当前路由名称、地址、索引值，请一一对应

<el-menu  :default-active="$route.name">

<el-menu-item index="Center">处理中心</el-menu-item>

</el-menu>

【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
黎明总是如期而至
09-01 2544
el-menu 是element-ui的菜单组件，为网站提供导航功能的菜单。
el-menu+router解决登录重定向问题
lc257的博客
11-18 1107
vue-router登录重定向
vue的路由和多级菜单的联动及布局,结合element组件的el-menu的实现.(后台管理系统的基础路由,菜单及页面)
您的博客
03-31 3627
1.话不多说,先上github整体demo代码链接:git整体demo代码 2.效果图: 3.说明:此demo并未做路由权限控制,只是vue-router结合element组件库的Layout 布局和NavMenu 导航菜单实现基础后台系统的单级和多级菜单的联动. 4.主要代码文件说明: 5.主要文件代码展示(重点部分均有注释): 1. 路由(router-index.js): import Vue from "vue"; import VueRouter from "vue-ro..
elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题
jiangjunyuan168的博客
10-25 5996
菜单项是否选中就是看 default-active 绑定的值是哪个菜单项的 index 值，所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。将 index 值设置为菜单项的路由路径，点击后直接进行路由跳转，然后将 default-active 绑定为路由跳转完后的当前路由路径。比如下方中从博客切换到标签，正常情况下选中的菜单项应该是标签（标签高亮），但是现在选中的菜单项依旧是博客或者其他菜单项。
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3356
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
el-menu跳转路由
高电平的博客
01-06 5633
首先添加:default-active属性，属性值为this.$router.path，同时还需要设置router为true（router默认值为ture，直接添加router即可）最后在el-menu-item中的index属性值设为对应的路径。接着在路由中配置好组件路径。
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
`el-menu`是Element-UI中用于创建导航菜单的组件，它支持多种布局和交互方式。在实现刷新页面后保持选中状态，我们需要考虑以下几个关键点： 1. **`default-active`属性**：这个属性用于设置默认激活的菜单项，它的...
element-ui 设置菜单栏展开的方法
10-18
在Vue项目中，我们可以利用路由配置来动态生成导航菜单。通过遍历Vue Router的routes配置，可以将定义的菜单项通过v-for指令动态渲染到<el-menu>中。 例如，如果我们要根据路由配置动态渲染菜单，并且隐藏不希望...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
elementUI的导航栏怎么根据路由默认选中相关项
weixin_34088583的博客
10-17 1655
1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> 2. el-submenu或者el-menu-item的index设置成路由对应的字符串 比如：路由为http://localhost:8080/#/project/list时，将需要被选中的el-subm...
vue3+element-plus点击导航栏，el-main中的内容根据路由切换
weixin_50161578的博客
09-21 3440
element-plus中的el-main用router-view跳转的路由不嵌入到el-main中，而是跳转到新页面
vue Element动态设置el-menu导航当前选中项
weixin_34007906的博客
04-25 4923
vue Element动态设置el-menu导航当前选中项 JavaScript dayaoge 6个月前 (10-20) 1351次浏览 Element UI 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。 官方文档给出了设置默认选中的属性。 Menu Attribute 参数说明类型可选值默认值 mode 模式 string horizont...
VUE根据路由跳转改变头部导航栏文字
marsur的博客
06-19 3851
效果图 步骤如下： 1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字 { name:"琴房管理系统", path:"/myHome", component:() => import("../page/common/myHome.vue") } 2.父组件传值 2.1.在父组件APP.vue...
el-menu导航菜单在页面跳转时，选中项不会改变的问题
weixin_43844730的博客
04-30 1247
菜单项是否选中其实是看default-active绑定的值是否与菜单项的index值一致，一致及判断为选中。那么将菜单项的index值绑定为路由的name，在default-active获取跳转路由的name即可（通过 $route 获取）。实现该功能，需要使用到ElementUI中导航菜单中的两个属性：select和default-active。例如tag标签点击跳转到“商品管理”页面，导航菜单的选中项也应该为商品管理。在点击ag标签进行页面跳转时，使el-menu中当前选中项跟着一起变化。
【VUE+Elemet 】动态设置el-menu导航,刷新页面保持当前菜单选中项及路由，与此同时标签同时变化
BMG-Princess
03-06 1920
（1）、 设置属性 :default-active=“activeIndex” （2）、watch方法检测路由变化 （3）、created生命周期设置路由具体代码如下： <template> <div id="app"> <el-menu :default-active="activeIndex" background-color=...
element-ui 中的 NavMenu 导航菜单 el-menu-item标签 自定义默认被选中
weixin_44647098的博客
09-09 9467
是选中的 ‘1’ 默认选中的 num 至于这个num 就是 你 循环出来的 的数值 <template> <div id="index"> <el-menu :default-active="'1'" router mode="horizontal" background-color="white" text-color="#222" ...
elementui中el-menu路由改变，自动切换到对应项
06-09 1166
主要通过设置 :default-active="$route.path" 来实现，如下：
element-ui el-menu 实现无线级菜单
GBEye的博客
11-12 3180
无限加载菜单，控制各级菜单项
Elelment UI 导航菜单设置路由
sudo0m的博客
07-06 933
属性 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。里面添加一个属性 router。把index设置成路径。
设置el-menu默认选中项
最新发布
02-23
<think>嗯，用户想了解如何在Element UI的el-menu组件中设置默认选中的菜单项。首先，我需要回忆一下Element UI的文档。记得el-menu有一个default-active属性，用来指定当前激活的菜单项。这个属性的值应该对应菜单项的index值。 那用户可能是在开发后台管理系统，比如导航菜单，需要默认打开某个页面。接下来要确认用户是否正确设置了index属性。每个el-menu-item的index必须是唯一的字符串，否则default-active可能不生效。 另外，用户可能遇到的问题包括：设置了default-active但没效果，或者动态加载数据后默认选中失效。这时候需要检查index是否是字符串，或者是否在数据渲染后才设置default-active的值。 还有，用户可能想通过路由路径来设置默认激活项，比如当前路由是/home，那么对应的菜单项index设为'1'，这时候可以用$route.path来绑定default-active。不过要注意index和路由路径的匹配，可能需要处理一下路径字符串。 另外，动态菜单的情况，比如从后端获取菜单数据，这时候要确保在数据加载完成之后再设置default-active的值，否则可能找不到对应的index。可能需要使用v-if或者监控数据加载状态来确保时机正确。 总结一下，关键点有几个：default-active属性的使用，index的唯一性和类型，以及动态数据下的处理。可能还需要提醒用户注意路由模式是否匹配，比如使用router-link的情况。最后，给出一个示例代码会有帮助，让用户更清楚如何实现。</think> Element UI 的 `<el-menu>` 组件中设置默认选中项，可以通过 **`default-active`** 属性实现。该属性需要绑定一个与菜单项 `index` 值匹配的字符串，以下是具体用法和注意事项： --- ### 关键步骤 1. **绑定 `default-active` 属性** 在 `<el-menu>` 标签中设置 `:default-active="activeIndex"`，其中 `activeIndex` 是你的响应式变量（如 Vue data 中的值）。 2. **为菜单项设置唯一 `index`** 每个 `<el-menu-item>` 必须配置唯一的 `index` 属性（字符串类型），例如 `index="1"`。 -- ### 示例代码 ```vue <template> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" > <el-menu-item index="1">首页</el-menu-item> <el-menu-item index="2">产品</el-menu-item> <el-menu-item index="3">文档</el-menu-item> </el-menu> </template> <script> export default { data() { return { activeIndex: "1" // 默认选中首页（对应 index="1"） }; }, methods: { handleSelect(index) { this.activeIndex = index; // 更新选中状态 } } }; </script> ``` --- ### 常见问题解决 1. **动态数据导致不生效** 如果菜单项是动态生成的，确保在数据加载完成后再设置 `default-active`（比如在 `mounted` 或异步请求回调中设置）。 2. **与路由结合使用** 若需根据当前路由自动选中菜单，可以监听路由变化并更新 `activeIndex`： ```javascript watch: { $route(to) { // 假设路由为 /home 时对应 index="1" this.activeIndex = to.path === "/home" ? "1" : "2"; } } ``` 3. **强制类型匹配** `default-active` 和 `index` 必须同为字符串类型。如果使用数字会不生效，需转换为字符串。 --- 通过上述方法，你可以轻松控制 `<el-menu>` 的默认选中状态。如果需要更复杂的逻辑（如根据权限动态设置），可以在数据初始化阶段计算 `activeIndex` 的值。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值