Element UI中的导航菜单(NavMenu)与路由联动实现

在使用Vue.js进行开发时，我们经常需要将导航菜单与路由进行联动，以实现页面的跳转和对应菜单的高亮。Element UI提供了一个组件NavMenu，可以非常方便地实现这个功能。

NavMenu组件

NavMenu是Element UI中的一种导航菜单组件，它可以展示一组具有层级结构的菜单项，并根据当前的路由状态自动高亮对应的菜单项。NavMenu组件的使用非常简单，只需在页面上添加NavMenu组件以及对应的菜单项即可。

<el-menu router>
  <el-menu-item index="/home">首页</el-menu-item>
  <el-submenu index="/about">
    <template slot="title">关于我们</template>
    <el-menu-item index="/about/company">公司简介</el-menu-item>
    <el-menu-item index="/about/team">团队介绍</el-menu-item>
  </el-submenu>
  <el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>

在NavMenu组件中，我们可以通过设置router属性来启用路由模式，这样NavMenu组件会自动根据当前的路由状态来高亮菜单项。同时，我们可以使用index属性来设置每个菜单项的对应路由路径，以便NavMenu组件正确地控制菜单项的高亮。

路由配置

在使用NavMenu组件时，我们还需要配置路由，以便实现导航菜单与路由的联动。在Vue.js中，我们可以使用vue-router来进行路由配置。首先，我们需要引入vue-router，并配置路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About,
    children: [
      {
        path: 'company',
        component: Company
      },
      {
        path: 'team',
        component: Team
      }
    ]
  },
  {
    path: '/contact',
    component: Contact
  }
]

const router = new VueRouter({
  routes
})

export default router

在路由配置中，我们使用path属性来设置路由路径，并使用component属性来指定对应的组件。在上述路由配置中，我们设置了三个顶级路由，分别对应首页、关于我们和联系我们三个菜单项。其中，关于我们下还有两个子菜单项，即公司简介和团队介绍。

菜单项的高亮

NavMenu组件会根据路由配置自动高亮对应的菜单项，但要注意，NavMenu组件只会根据菜单项的直接路径进行匹配，不会考虑菜单项的子路径。例如，对于上述的路由配置，如果我们在路由状态为'/about/company'时，想要同时高亮父菜单项"关于我们"和子菜单项"公司简介"，我们需要在对应的菜单项上添加route-active类名。

<el-menu router>
  <el-menu-item index="/home">首页</el-menu-item>
  <el-submenu index="/about">
    <template slot="title" class="route-active">关于我们</template>
    <el-menu-item index="/about/company" class="route-active">公司简介</el-menu-item>
    <el-menu-item index="/about/team">团队介绍</el-menu-item>
  </el-submenu>
  <el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>

通过添加route-active类名，我们可以让NavMenu组件同时高亮父菜单项和子菜单项。

总结

通过Element UI的NavMenu组件和vue-router的路由配置，我们可以方便地实现导航菜单与路由的联动，实现菜单项的高亮效果。同时，我们还可根据需求在菜单项上添加自定义类名，以实现更灵活的菜单高亮效果。希望以上内容能帮助到你。

本文来自极简博客，作者：开发者故事集，转载请注明原文链接：Element UI中的导航菜单(NavMenu)与路由联动实现