ElementUI之菜單(Menu)的使用方式

更新時(shí)間：2025年08月26日 09:26:59 作者：xrkhy

文章介紹Vue項(xiàng)目中ElementUI菜單默認(rèn)精確路由匹配,與router-link的模糊匹配不同,提供三種解決方案：計(jì)算屬性、高階組封裝、子菜單遞歸,并根據(jù)項(xiàng)目復(fù)雜度推薦使用方式

項(xiàng)目創(chuàng)建

創(chuàng)建項(xiàng)目

我的node.js使用的是20.18.0版本

我的 @vue/cli使用的是5.0.8版本

新建空白文件夾輸入cmd打開命令行窗口

執(zhí)行如下指令

vue create elementui-draw-pages

勾選如下選項(xiàng)

運(yùn)行項(xiàng)目

npm run serve

運(yùn)行結(jié)果

整理目錄

刪除src/assets中的所有l(wèi)ogo.png

刪除src/components中的所有文件

修改src/route/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

刪除src/views中所有文件

修改src/app.vue

<template>
  <div id="app">
    初始化頁(yè)面
  </div>
</template>

<style lang="scss">

</style>

引入ElementUI

安裝ElementUI

可以參考我之前的文章Vue2使用cli腳手架引入ElementUI

我直接全局安裝了

npm i element-ui -S

引入ElementUI

在 main.js 中寫入以下內(nèi)容：

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

測(cè)試是否安裝成功

編寫src/app.vue

<template>
  <div id="app">
    <el-button type="primary">測(cè)試</el-button>
  </div>
</template>

<script>

export default {
}
</script>

<style lang="scss">
</style>

運(yùn)行結(jié)果

編寫路由搭架子

一級(jí)路由

新建src/views/Login.vue

<template>
  <div>
    <h1>一級(jí)路由 Login</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

新建src/views/front/frontIndex.vue

<template>
  <div>
    <h1> 一級(jí)路由 前臺(tái)</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/adminIndex.vue

<template>
  <div>
    <h1>一級(jí)路由 后臺(tái)</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scope>
</style>

二級(jí)路由

新建src/views/front/home.vue

<template>
  <div>
    <h2>二級(jí)路由Home</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/front/caricature.vue

<template>
  <div>
    <h2>二級(jí)路由漫畫</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/user.vue

<template>
  <div>
    <h2>二級(jí)路由 用戶管理</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/provider.vue

<template>
  <div>
      <h2>二級(jí)路由Provider</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

修改src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 重定向
  {path: '/', redirect: '/login'},
  {path: '/login', component: () => import('@/views/Login.vue')},
  {path: '/admin', component: () => import('@/views/admin/adminIndex.vue'),
    redirect: '/admin/user', // 重定向兩種寫法 推薦這種寫法簡(jiǎn)單
    children:[
      {path: 'user', component: () => import('@/views/admin/user.vue')},
      {path: 'provider', component: () => import('@/views/admin/provider.vue')},
    ]
  },
  {path: '/front', component: () => import('@/views/front/frontIndex.vue'),
    children:[
      {path: '/front', redirect: '/front/home'},// 重定向兩種寫法
      {path: '/front/home', component: () => import('@/views/front/home.vue')},
      {path: '/front/caricature', component: () => import('@/views/front/caricature.vue')}
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

運(yùn)行結(jié)果

使用 ElementUI 中菜單組件

修改src/views/front/frontIndex.vue

<template>
  <div>
    <!-- <h1> 一級(jí)路由 前臺(tái)</h1>
    <router-view></router-view> -->
    <el-container>
      <el-header>
        <!--
            router: 是否使用 vue-router 的模式，
            啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)
          -->
          <!-- 
            這里 default-active 需要默認(rèn)選中
            這里的default-active為什么不能寫死呢？即 default-active="/front/home"
            因?yàn)槁酚墒莿?dòng)態(tài)的，所以需要根據(jù)路由來(lái)動(dòng)態(tài)設(shè)置
            如果寫成上面的，那么路由切換的時(shí)候，菜單欄不會(huì)跟著切換。
            即出現(xiàn)  在http://localhost:8080/front/home頁(yè)面已刷新，
                  默認(rèn)選中變成了首頁(yè)，但是還是展示漫畫頁(yè)面
          -->
          <!-- 
            mode： 模式，默認(rèn)值 vertical(垂直展示) ，可選值 horizontal(水平展示)
          -->
          <!-- 
            background-color: 菜單欄背景色
            text-color: 菜單欄文字顏色
            active-text-color: 菜單欄激活的文字顏色
          -->
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/front/home">首頁(yè)</el-menu-item>
          <el-menu-item index="/front/caricature">漫畫</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.el-header{
  margin: 0;
  padding: 0;
}
</style>

修改src/views/admin/adminIndex.vue

<template>
  <div>
    <!-- <h1>一級(jí)路由 后臺(tái)</h1>
    <router-view></router-view> -->
    <el-container>
      <el-header class="el-header-admin"> 后臺(tái)管理 </el-header>
      <el-container>
        <el-aside width="200px">
          <!--
            router: 是否使用 vue-router 的模式，
            啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)
          -->
          <!-- 
            這里 default-active 需要默認(rèn)選中
            這里的default-active為什么不能寫死呢？即 default-active="/admin/user"
            因?yàn)槁酚墒莿?dòng)態(tài)的，所以需要根據(jù)路由來(lái)動(dòng)態(tài)設(shè)置
            如果寫成上面的，那么路由切換的時(shí)候，菜單欄不會(huì)跟著切換。
            即出現(xiàn)  在http://localhost:8080/admin/provider頁(yè)面已刷新，
                  默認(rèn)選中變成了用戶管理，但是還是展示供應(yīng)商管理頁(yè)面
          -->
          <!-- 
            mode： 模式，默認(rèn)值 vertical(垂直展示) ，可選值 horizontal(水平展示)
          -->
          <!-- 
            background-color: 菜單欄背景色
            text-color: 菜單欄文字顏色
            active-text-color: 菜單欄激活的文字顏色
          -->
          <el-menu
            router
            :default-active="$route.path"
            class="el-menu-demo"
            mode="vertical"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/admin/user">用戶管理</el-menu-item>
            <el-menu-item index="/admin/provider">供應(yīng)商管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scope>
* {
  margin: 0;
  padding: 0;
}
.el-header-admin {
  background-color: #545c64;
  font-size: 30px;
  color: #fff;
  line-height: 60px;
}
.el-menu-demo {
  height: 90vh;
}
</style>

運(yùn)行結(jié)果

高級(jí)用法

ElementUI 的菜單組件（el-menu）默認(rèn)的??路由匹配行為是精確匹配??，而非 router-link的模糊匹配（即包含匹配）。不過(guò)，可以通過(guò)自定義邏輯模擬類似效果。

以下是具體分析及實(shí)現(xiàn)方案：

1 ElementUI 菜單的默認(rèn)路由機(jī)制?

路由跳轉(zhuǎn)??：

在 el-menu上設(shè)置 :router="true"后
點(diǎn)擊 el-menu-item時(shí)會(huì)將其 index屬性作為路徑跳轉(zhuǎn)（等價(jià)于 $router.push(index)）。

??激活狀態(tài)匹配??：

default-active屬性需綁定當(dāng)前路由路徑（如 :default-active=“$route.path”）
但??僅支持精確匹配??：只有當(dāng)前路徑與 index完全一致時(shí)，菜單項(xiàng)才會(huì)高亮。

2 與 router-link模糊匹配的區(qū)別?

特性	?router-link（默認(rèn)）	ElementUI 菜單（默認(rèn)）
匹配模式??	模糊匹配（路徑包含即激活）	精確匹配（路徑完全一致才激活）
??配置方式??	無(wú)需額外配置	需手動(dòng)綁定 default-active
??子路徑激活??	支持（如 /user激活 /user/list）	? 不支持

3 實(shí)現(xiàn)模糊匹配的解決方案?

方案一：自定義計(jì)算屬性動(dòng)態(tài)匹配?

通過(guò)監(jiān)聽路由變化，手動(dòng)檢查當(dāng)前路徑是否包含菜單項(xiàng)的 index值：

<template>
  <el-menu :default-active="activeMenu">
    <el-menu-item index="/user" @click="$router.push('/user')">用戶管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    activeMenu() {
      const route = this.$route.path;
      // 模糊匹配邏輯：若當(dāng)前路徑包含菜單項(xiàng)的 index，則激活該菜單
      if (route.includes('/user')) return '/user';
      return route;
    }
  }
};
</script>

優(yōu)點(diǎn)??：靈活控制匹配規(guī)則，支持多級(jí)路徑。

方案二：擴(kuò)展 el-menu的 default-active邏輯?

封裝高階組件，重寫 default-active的匹配邏輯：

Vue.component('fuzzy-menu', {
  props: ['menus'],
  computed: {
    activePath() {
      return this.menus.find(menu => 
        this.$route.path.includes(menu.index)
      )?.index;
    }
  },
  render(h) {
    return h('el-menu', {
      props: { defaultActive: this.activePath }
    }, this.menus.map(menu => 
      h('el-menu-item', { props: { index: menu.index } }, menu.label)
    ));
  }
});

適用場(chǎng)景??：需多處復(fù)用模糊匹配菜單時(shí)。

方案三：遞歸處理嵌套菜單?

對(duì)于多級(jí)菜單（el-submenu），遞歸遍歷子節(jié)點(diǎn)檢查路徑：

function findActiveMenu(menus, path) {
  for (const menu of menus) {
    if (path.includes(menu.index)) return menu.index;
    if (menu.children) {
      const childActive = findActiveMenu(menu.children, path);
      if (childActive) return childActive;
    }
  }
}

適用場(chǎng)景??：動(dòng)態(tài)生成復(fù)雜樹形菜單時(shí)。