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

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

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

項目創(chuàng)建

創(chuàng)建項目

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

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

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

執(zhí)行如下指令

vue create elementui-draw-pages

勾選如下選項

運行項目

npm run serve

運行結果

整理目錄

刪除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">
    初始化頁面
  </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)
});

測試是否安裝成功

編寫src/app.vue

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

<script>

export default {
}
</script>

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

運行結果

編寫路由搭架子

一級路由

新建src/views/Login.vue

<template>
  <div>
    <h1>一級路由 Login</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

新建src/views/front/frontIndex.vue

<template>
  <div>
    <h1> 一級路由 前臺</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/adminIndex.vue

<template>
  <div>
    <h1>一級路由 后臺</h1>
    <router-view></router-view>
  </div>
</template>

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

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

二級路由

新建src/views/front/home.vue

<template>
  <div>
    <h2>二級路由Home</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/front/caricature.vue

<template>
  <div>
    <h2>二級路由漫畫</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/user.vue

<template>
  <div>
    <h2>二級路由 用戶管理</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

新建src/views/admin/provider.vue

<template>
  <div>
      <h2>二級路由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', // 重定向兩種寫法 推薦這種寫法簡單
    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

運行結果

使用 ElementUI 中菜單組件

修改src/views/front/frontIndex.vue

<template>
  <div>
    <!-- <h1> 一級路由 前臺</h1>
    <router-view></router-view> -->
    <el-container>
      <el-header>
        <!--
            router: 是否使用 vue-router 的模式，
            啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉
          -->
          <!-- 
            這里 default-active 需要默認選中
            這里的default-active為什么不能寫死呢？即 default-active="/front/home"
            因為路由是動態(tài)的，所以需要根據(jù)路由來動態(tài)設置
            如果寫成上面的，那么路由切換的時候，菜單欄不會跟著切換。
            即出現(xiàn)  在http://localhost:8080/front/home頁面已刷新，
                  默認選中變成了首頁，但是還是展示漫畫頁面
          -->
          <!-- 
            mode： 模式，默認值 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">首頁</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>一級路由 后臺</h1>
    <router-view></router-view> -->
    <el-container>
      <el-header class="el-header-admin"> 后臺管理 </el-header>
      <el-container>
        <el-aside width="200px">
          <!--
            router: 是否使用 vue-router 的模式，
            啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉
          -->
          <!-- 
            這里 default-active 需要默認選中
            這里的default-active為什么不能寫死呢？即 default-active="/admin/user"
            因為路由是動態(tài)的，所以需要根據(jù)路由來動態(tài)設置
            如果寫成上面的，那么路由切換的時候，菜單欄不會跟著切換。
            即出現(xiàn)  在http://localhost:8080/admin/provider頁面已刷新，
                  默認選中變成了用戶管理，但是還是展示供應商管理頁面
          -->
          <!-- 
            mode： 模式，默認值 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">供應商管理</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>

運行結果

高級用法

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

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

1 ElementUI 菜單的默認路由機制?

路由跳轉??：

在 el-menu上設置 :router="true"后
點擊 el-menu-item時會將其 index屬性作為路徑跳轉（等價于 $router.push(index)）。

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

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

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

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

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

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

通過監(jiān)聽路由變化，手動檢查當前路徑是否包含菜單項的 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;
      // 模糊匹配邏輯：若當前路徑包含菜單項的 index，則激活該菜單
      if (route.includes('/user')) return '/user';
      return route;
    }
  }
};
</script>

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

方案二：擴展 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)
    ));
  }
});

適用場景??：需多處復用模糊匹配菜單時。

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

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

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

適用場景??：動態(tài)生成復雜樹形菜單時。

總結??

??默認行為??：ElementUI 菜單僅支持精確路由匹配，無法直接實現(xiàn) router-link的模糊匹配。

??自定義方案??：

通過計算屬性動態(tài)綁定 activeMenu?
封裝高階組件擴展匹配邏輯 ?
遞歸處理多級菜單路徑 ?

??推薦場景??：

簡單項目 → ??方案一??（計算屬性）
復雜系統(tǒng) → ??方案二/三??（組件封裝或遞歸）

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue在原窗口與新窗口打開外部鏈接的實現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉外部鏈接的實現(xiàn)代碼，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-02-02
講解vue-router之什么是編程式路由
編程式路由在我們的項目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
詳解Vue基于vue-quill-editor富文本編輯器使用心得
這篇文章主要介紹了Vue基于vue-quill-editor富文本編輯器使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vuex存值與取值的實例
今天小編大家分享一篇vuex存值與取值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue父子組件之間的傳參的幾種方式小結
本文主要介紹了vue父子組件之間的傳參的幾種方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
Vue3實現(xiàn)轉盤抽獎效果的示例詳解
這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的轉盤抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下
2023-10-10
ant design的table組件實現(xiàn)全選功能以及自定義分頁
這篇文章主要介紹了ant design的table組件實現(xiàn)全選功能以及自定義分頁，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue axios post發(fā)送復雜對象問題
現(xiàn)在vue項目中，一般使用axios發(fā)送請求去后臺拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復雜對象的一點思考,需要的朋友可以參考下
2019-06-06
vue中v-text / v-html使用實例代碼詳解
這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
vue實現(xiàn)城市列表選擇功能
這篇文章主要介紹了vue實現(xiàn)城市列表選擇功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07