当前位置：首页 > VUE

vue element实现导航切换

2026-01-22 23:09:52VUE

vue element实现导航切换的方法

使用el-menu组件

在Vue项目中安装Element UI后，可以通过el-menu组件实现导航切换功能。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(key) {
      this.activeIndex = key
      // 根据key值进行路由跳转或其他操作
    }
  }
}
</script>

结合vue-router实现路由跳转

Element UI的导航菜单可以与vue-router配合使用，实现页面无刷新跳转。

<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>

实现嵌套子菜单

对于复杂的导航结构，可以使用el-submenu组件实现多级菜单。

<template>
  <el-menu
    :default-active="activeIndex"
    mode="vertical"
  >
    <el-submenu index="1">
      <template slot="title">产品</template>
      <el-menu-item index="1-1">产品1</el-menu-item>
      <el-menu-item index="1-2">产品2</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">服务</el-menu-item>
  </el-menu>
</template>

自定义导航样式

可以通过覆盖Element UI的默认样式来自定义导航菜单的外观。

<style>
.el-menu {
  background-color: #545c64;
}
.el-menu-item {
  color: #fff;
}
.el-menu-item:hover {
  background-color: #434a50;
}
</style>

动态生成导航菜单

根据后台返回的数据动态生成导航菜单，提高灵活性。

vue element实现导航切换

<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
  >
    <el-menu-item 
      v-for="item in menuItems" 
      :key="item.id" 
      :index="item.id.toString()"
    >
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于' }
      ]
    }
  }
}
</script>