当前位置：首页 > VUE

vue element实现导航联动

2026-01-22 08:01:01VUE

Vue + Element UI 实现导航联动

在 Vue 项目中结合 Element UI 实现导航联动功能，通常需要利用 el-menu 组件及其相关属性。以下是实现步骤和代码示例：

基本导航联动实现

安装 Element UI（如未安装）：

npm install element-ui

在 main.js 中引入 Element UI：

vue element实现导航联动

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在组件中使用 el-menu：

<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">产品</el-menu-item>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      // 根据 index 执行路由跳转或其他逻辑
      if (index === '1') this.$router.push('/home');
      if (index === '2') this.$router.push('/products');
      if (index === '3') this.$router.push('/about');
    }
  }
};
</script>

动态绑定路由与导航

通过 router-link 实现导航与路由联动：

vue element实现导航联动

<template>
  <el-menu
    :default-active="$route.path"
    mode="horizontal"
    router
  >
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/products">产品</el-menu-item>
    <el-menu-item index="/about">关于我们</el-menu-item>
  </el-menu>
</template>

说明：

router 属性启用路由模式，index 直接绑定路由路径。
default-active 绑定当前路由路径 $route.path，实现高亮同步。

嵌套菜单联动

使用 el-submenu 实现多级导航联动：

<template>
  <el-menu
    :default-active="$route.path"
    mode="vertical"
    router
  >
    <el-submenu index="1">
      <template slot="title">产品</template>
      <el-menu-item index="/product/web">Web 产品</el-menu-item>
      <el-menu-item index="/product/mobile">移动端产品</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

侧边栏导航联动

结合 el-menu 和 el-submenu 实现侧边栏联动：

<template>
  <el-menu
    :default-active="$route.path"
    class="sidebar"
    router
  >
    <el-menu-item index="/dashboard">
      <i class="el-icon-s-home"></i>
      <span>仪表盘</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-management"></i>
        <span>管理</span>
      </template>
      <el-menu-item index="/user/list">用户列表</el-menu-item>
      <el-menu-item index="/role/list">角色列表</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<style>
.sidebar {
  height: 100vh;
  width: 200px;
}
</style>