使用el-menu-item点击页面不高亮

最新推荐文章于 2025-01-24 10:54:18 发布

原创最新推荐文章于 2025-01-24 10:54:18 发布 · 1.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

文章讲述了在Vue项目中，如何解决el-menu由于动态路由导致的默认激活项高亮问题，关键在于将default-active的值设置为完整的$router.fullPath，确保菜单项与路由参数匹配，无论是否有查询参数都能正确高亮。

标题所指的情况有很多种，我找过的很多答案要么是没有给el-menu加router，或者是menu-item没有绑定正确的index。而我这里给出的情况是：当我循环列表生成el-menu-item，他们之间使用id区分（或者是其他参数）。

如果el-menu的default-active="$route.name"，因为他们的route.name相同，所以点击任意一项，el-menu-item会全部高亮。如果用$route.path，就会出现第一次点击不高亮，只有处于当前页面时，再次点击才会高亮。这时因为$route.path后面是没有参数的，这个值不等于el-menu-item的index（index是这个页面对应的完整路径，它是携带参数的）。

所以正确写法应该是：

 <!-- 笔记：使用$route.fullPath使完整路径与menu-item的index属性相匹配。
该组件只有default-active的值与index相同时才能高亮，
因此在路径携带query参数的情况下，使用完整路径可以使路径+参数进行对比，保证选中项可以高亮。
注意因为是完整路径，前面要加上/符号。-->

<el-menu :default-active="$route.fullPath" class="el-menu-demo" mode="horizontal" :router="true">
   <el-menu-item index="/Home">Home</el-menu-item>
      <el-submenu index="/ProductList" ref="Product">
         <template slot="title">Product</template>
            <el-menu-item v-for="(item,index) in productionType" :key="index" :index="'/ProductList?id='+item.id" :route="{name:'ProductList',query: { id: item.id }, params: { adpic: item.adpic, imgPath: webpath,catname:item.catname,catjc:item.catjc}}">{{ item.catname }} {{'/ProductList?id='+item.id}}</el-menu-item>
      </el-submenu>
   <el-menu-item index="/ContactUs">Contact us</el-menu-item>
</el-menu>

如果无法解决问题，也欢迎评论区讨论