Element UI 的 NavMenu 组件：解决高亮显示问题，轻松构建动态导航

前言

Element UI 是一个流行的前端框架，为 Vue.js 提供了丰富的组件库。其中，NavMenu 组件是一个强大的导航栏构建工具，可以帮助您快速创建美观、易用的导航菜单。

NavMenu 组件的高亮显示问题

在使用 NavMenu 组件时，您可能会遇到一个常见问题：当您点击导航栏中的某一项时，该项不会被高亮显示。这是因为默认情况下，NavMenu 组件不会自动为当前激活的导航项添加高亮样式。

解决高亮显示问题

要解决 NavMenu 组件的高亮显示问题，您可以通过以下两种方法之一：

1. 使用 active-class 属性

   active-class 属性允许您为当前激活的导航项指定一个 CSS 类。当导航项被激活时，这个 CSS 类将被添加到该导航项上。您可以使用这个 CSS 类来设置导航项的高亮样式。

   例如，您可以将以下代码添加到您的 CSS 文件中：

   .nav-item-active {
     background-color: #007bff;
     color: #fff;
   }
   

   然后，您可以将以下代码添加到您的 Vue.js 代码中：

   <el-menu :active-class="nav-item-active">
     <el-menu-item index="1">选项 1</el-menu-item>
     <el-menu-item index="2">选项 2</el-menu-item>
     <el-menu-item index="3">选项 3</el-menu-item>
   </el-menu>
   

   这样，当您点击导航栏中的某一项时，该项将被高亮显示。

2. 使用 index 属性

   index 属性允许您为每个导航项指定一个索引值。当您点击导航栏中的某一项时，NavMenu 组件会自动为该导航项添加一个 is-active 类。您可以使用这个类来设置导航项的高亮样式。

   例如，您可以将以下代码添加到您的 CSS 文件中：

   .nav-item-active {
     background-color: #007bff;
     color: #fff;
   }
   

   然后，您可以将以下代码添加到您的 Vue.js 代码中：

   <el-menu>
     <el-menu-item index="1">选项 1</el-menu-item>
     <el-menu-item index="2">选项 2</el-menu-item>
     <el-menu-item index="3">选项 3</el-menu-item>
   </el-menu>
   

   这样，当您点击导航栏中的某一项时，该项将被高亮显示。

结语

以上就是解决 Element UI 的 NavMenu 组件高亮显示问题的两种方法。希望本文对您有所帮助。如果您有任何问题或建议，欢迎在评论区留言。