Element UI侧边栏如何优雅地与Vue Router集成？（侧边.优雅.集成.UI.Element.....）

wufei123 2025-03-01 阅读:55 评论:0

优雅整合element ui侧边栏和vue router 在基于Element UI和Vue Router构建的应用中，高效关联侧边栏菜单和路由至关重要，这能实现菜单动态显示和页面跳转。本文将详细讲解如何优雅地集成Element UI侧边...

Element UI侧边栏如何优雅地与Vue Router集成？

优雅整合element ui侧边栏和vue router

在基于Element UI和Vue Router构建的应用中，高效关联侧边栏菜单和路由至关重要，这能实现菜单动态显示和页面跳转。本文将详细讲解如何优雅地集成Element UI侧边栏与Vue Router，点击侧边栏菜单即可跳转到对应路由。

关键在于利用Vue Router的路由信息和Element UI的菜单组件。我们需要动态渲染侧边栏菜单项，并根据路由配置设置菜单属性。

以下代码片段演示了实现方法：

PHP

<el-menu ...>
  <template v-for="(item, index) in navData">
    <el-submenu :index="index + ''" :key="index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item 
        v-for="child in item.children.filter(child => !child.hidden)" 
        :key="child.path" 
        :index="child.path">
        {{ child.name }}
      </el-menu-item>
    </el-submenu>
  </template>
</el-menu>

这段代码使用 v-for 循环遍历 navData 数组，该数组包含所有需要显示的菜单项信息。el-submenu 组件创建子菜单，el-menu-item 创建菜单项。index 属性唯一标识菜单项，:index="child.path" 将菜单项索引设置为对应的路由路径，确保点击跳转正确。filter(child => !child.hidden) 过滤掉 hidden: true 的菜单项，实现菜单的显示/隐藏控制。

为了使代码正常工作，需要将路由配置数据赋值给 navData：

PHP

this.navData = this.$router.options.routes;

注意，路由数据需要特定结构，例如：

PHP

{
  path: '/',
  code: 'AA',
  name: 'AA菜单',
  component: Home,
  hidden: false,
  children: [
    {
      path: '/list',
      name: '列表1',
      code: 'list',
      hidden: false,
      component: resolve => require(['@/views/AA/list'], resolve)
    }
  ]
}