element根据路由动态判定高亮

xiaoming_0208

于 2023-05-05 11:41:27 发布

阅读量267

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/xiaoming4965/article/details/130503669

版权

该代码段展示了在Vue.js中如何使用`el-menu-item`组件结合`v-for`指令动态渲染菜单，并通过`$route.path.indexOf(item.path)`判断当前路由是否匹配菜单项，以此来设置高亮样式。当`indexOf()`返回值不等于-1时，表示路径包含匹配项，应用`height-style-1`高亮样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-menu-item class="menu-active" :class="$route.path.indexOf(item.path) !== -1 ? 'height-style-1' : 'height-style-2'"
 :index="item.path" v-for="(item, index) in menuList" :key="item.path">
{{item.label }}
</el-menu-item>

方法一: indexOf() (推荐)

var str = "123";
console.log(str.indexOf("3") != -1 );  // true  包含情况下高亮  涉及子集菜单

"$route.path.indexOf(item.path)