当前位置：首页 > VUE

vue element实现导航联动

2026-02-22 23:01:45VUE

实现导航联动的基本思路

在Vue和Element UI中实现导航联动，通常需要结合路由（如vue-router）和Element的导航菜单组件（如el-menu）。核心是通过监听路由变化动态更新菜单选中状态，或通过菜单点击事件触发路由跳转。

安装必要依赖

确保项目已安装vue-router和element-ui。若未安装，可通过以下命令添加：

npm install vue-router element-ui

配置路由

在router/index.js中定义路由结构，注意path与菜单项的index属性需对应：

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { title: '控制台' }
  },
  {
    path: '/user',
    component: () => import('@/views/User.vue'),
    meta: { title: '用户管理' }
  }
];

使用Element Menu组件

在布局文件中引入el-menu，并绑定router属性以启用路由模式：

<template>
  <el-menu
    :default-active="$route.path"
    mode="horizontal"
    router
    @select="handleSelect">
    <el-menu-item index="/dashboard">控制台</el-menu-item>
    <el-menu-item index="/user">用户管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleSelect(index) {
      console.log('选中菜单:', index);
    }
  }
};
</script>

动态高亮当前路由

通过default-active绑定当前路由路径$route.path，确保页面刷新后仍能正确高亮菜单项。若使用嵌套路由，需处理路径匹配逻辑：

<el-menu :default-active="activeMenu" router>
  <!-- 菜单项 -->
</el-menu>

<script>
export default {
  computed: {
    activeMenu() {
      return this.$route.path.split('/')[1] || '/';
    }
  }
};
</script>

处理嵌套菜单

对于多级菜单，使用el-submenu并递归渲染子项。路由配置需匹配嵌套结构：

<el-submenu index="system">
  <template slot="title">系统管理</template>
  <el-menu-item index="/system/user">用户</el-menu-item>
  <el-menu-item index="/system/role">角色</el-menu-item>
</el-submenu>

响应式菜单折叠

结合el-menu的collapse属性与状态管理（如Vuex）实现折叠功能：

<el-menu :collapse="isCollapse">
  <!-- 菜单项 -->
</el-menu>

<el-button @click="isCollapse = !isCollapse">切换折叠</el-button>

权限控制联动

根据用户权限动态生成菜单，通常需在路由的meta中添加权限标识，并在渲染前过滤：

vue element实现导航联动

const routes = [
  {
    path: '/admin',
    meta: { roles: ['admin'] }
  }
];

<el-menu>
  <template v-for="item in filteredRoutes">
    <el-menu-item v-if="!item.children" :index="item.path">
      {{ item.meta.title }}
    </el-menu-item>
  </template>
</el-menu>