Vue项目中如何关联ElementUI侧边栏菜单与路由？-html教程-PHP中文网

Vue项目中如何关联ElementUI侧边栏菜单与路由？

DDD

发布： 2025-02-27 21:22:27

原创

874人浏览过

Vue项目中如何关联ElementUI侧边栏菜单与路由？

本文讲解如何在vue项目中，利用element ui组件库，将侧边栏菜单与路由系统巧妙关联，实现点击菜单即跳转页面的功能。这是一种常见的开发需求，本文将提供详细的实现步骤。

核心在于将Element UI的<el-menu></el-menu>组件与Vue Router的路由配置数据有效结合，通过遍历路由数据，动态生成<el-menu></el-menu>的菜单项。以下代码示例演示了这一过程：

首先，我们需要一个包含路由信息的数组navData。此数组的结构需与路由配置相对应。示例navData数据结构如下：

<code class="javascript">{
  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)
    }
  ]
},</code>

登录后复制

接下来，使用v-for指令遍历navData数组，动态创建<el-menu></el-menu>组件的菜单项。对于包含子菜单的项，使用<el-submenu></el-submenu>组件；对于叶子节点，使用<el-menu-item></el-menu-item>组件。关键在于将el-menu-item的index属性设置为路由的path属性。这样，点击菜单项时，Vue Router会根据index属性跳转到对应的路由。

具体代码如下：

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

查看详情

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

请注意，需要在组件的data中将navData赋值为路由配置数据：this.navData = this.$router.options.routes。这确保navData数组包含最新的路由信息。filter(fil => !fil.hidden)用于过滤掉hidden: true的路由项，避免这些路由项出现在侧边栏中。

通过以上步骤，即可实现Element UI侧边栏与路由的绑定，方便用户导航。

以上就是Vue项目中如何关联ElementUI侧边栏菜单与路由？的详细内容，更多请关注php中文网其它相关文章！