快捷導(dǎo)航

Vue3 根據(jù)路由動態(tài)生成側(cè)邊菜單的方法

更新時間：2025年01月16日 10:37:46 作者：Jiaberrr

本文介紹了如何在Vue3項目中根據(jù)路由動態(tài)生成側(cè)邊菜單,包括準備工作、路由配置基礎(chǔ)、組件搭建和優(yōu)化與拓展,通過這些步驟,可以實現(xiàn)一個靈活且可擴展的側(cè)邊菜單系統(tǒng),提升用戶體驗,感興趣的朋友一起看看吧

在 Vue3 的項目開發(fā)，尤其是后臺管理系統(tǒng)這類復(fù)雜應(yīng)用場景中，側(cè)邊菜單扮演著舉足輕重的角色，它是用戶快速導(dǎo)航至各個功能模塊的得力助手。而根據(jù)路由動態(tài)生成側(cè)邊菜單，則為系統(tǒng)的靈活性和可擴展性增添了強大動力。接下來，我們將深入探討如何在 Vue3 中實現(xiàn)這一關(guān)鍵功能。

gitCode代碼地址：https://gitcode.com/Jiaberrr/vue3-pc-template/overview,

gitee代碼地址：https://gitee.com/zunyi-gabe/vue3-pc-template （如果需要簡單版（除了框架啥也沒有）請切到master分支）

演示地址1：https://vue3-pc-template.vercel.app/login演示地址2：https://env-00jxt0stsnl3-static.normal.cloudstatic.cn/index.html

一、準備工作

首先，確保你的 Vue3 項目已經(jīng)集成了 Vue Router 和合適的 UI 組件庫（如 Element Plus，這里以其為例進行講解，原理相通）。Vue Router 負責(zé)管理路由信息，而 UI 組件庫則提供了美觀且功能豐富的菜單組件供我們使用。

二、路由配置基礎(chǔ)

在項目的路由模塊（通常是 router/index.js 之類的文件）中，精心定義好各個路由路徑及其對應(yīng)的組件。例如：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import UserManage from '@/views/UserManage.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
breadcrumbName: '首頁',
icon: 'HomeFilled' // 假設(shè) Element Plus 的圖標名稱，實際依庫而定
}
},
{
path: '/about',
name: 'About',
component: About,
meta: {
breadcrumbName: '關(guān)于我們',
icon: 'InfoFilled'
}
},
{
path: '/user-manage',
name: 'UserManage',
component: UserManage,
meta: {
breadcrumbName: '用戶管理',
icon: 'UserFilled'
},
children: [
{
path: 'list',
name: 'UserList',
component: () => import('@/views/UserList.vue'),
meta: {
breadcrumbName: '用戶列表'
}
},
{
path: 'add',
name: 'UserAdd',
component: () => import('@/views/UserAdd.vue'),
meta: {
breadcrumbName: '添加用戶'
}
}
]
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;

這里，每個路由對象都有 meta 字段，用于存儲菜單顯示相關(guān)的額外信息，如面包屑名稱和圖標名稱，同時部分路由設(shè)置了子路由，構(gòu)建出層級結(jié)構(gòu)，為側(cè)邊菜單的多級展示奠定基礎(chǔ)。

三、組件搭建

創(chuàng)建側(cè)邊菜單組件（例如 SidebarMenu.vue）：

<template>
  <div class="logo-container flex-center">
    <img class="logo-icon" src="/img/logo.png" />
    <text v-if="!isCollapse">后臺管理平臺</text>
  </div>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    router
    unique-opened
    :collapse="isCollapse"
    @select="changeMenu"
  >
    <el-menu-item index="/dashboard">
      <el-icon><Menu /></el-icon>
      <template #title>首頁</template>
    </el-menu-item>
    <el-sub-menu v-for="item in routerList" :index="item.path" :key="item.name">
      <template #title>
        <el-icon>
          <component :is="item.meta.icon" />
        </el-icon>
        <span v-show="!isCollapse">
          {{ item.meta.breadcrumbName }}
        </span>
      </template>
      <el-menu-item
        v-for="ite in item.children"
        :index="item.path+ '/'+ ite.path"
        :key="ite.name"
        >{{ ite.meta.breadcrumbName }}</el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>
  <script setup>
import router from "@/router";
import { useAuthRouterStore } from "@/stores/authRouter.js";
import { useTagStore } from "@/stores/tagList.js";
const tagStore = useTagStore();
const routerOptions = router.getRoutes()
const authRouterStore = useAuthRouterStore();
const props = defineProps(["isCollapse"]);
const routerList = authRouterStore.routerList;
const changeMenu = (menu) => {
  let obj = routerOptions.find(val => val.path == menu)
  tagStore.addTagList({
  name:obj.path,
  breadcrumbName:obj.meta.breadcrumbName
})
}
</script>
  <style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180;
}
.logo-container {
  width: 100%;
  height: 60px;
  overflow: hidden;
}
.logo-icon {
  height: 60px;
  scale: 1.4;
}
</style>

在模板部分：

1、頭部 logo 展示：

通過<div class="logo-container flex-center">包裹，實現(xiàn)了 logo 圖標和平臺名稱的水平居中布局。當(dāng)側(cè)邊欄處于展開狀態(tài)（!isCollapse）時，顯示“后臺管理平臺”文字，logo 圖標通過<img class="logo-icon" src="/img/logo.png" />引入，并且設(shè)置了一定的樣式，如高度為 60px，縮放比例為 1.4。

2、 菜單主體構(gòu)建：

使用了 Element UI 的 <el-menu> 組件來構(gòu)建側(cè)邊菜單。
:default-active="$route.path"：將當(dāng)前激活菜單與當(dāng)前路由路徑綁定，確保用戶在頁面跳轉(zhuǎn)時，對應(yīng)的菜單能正確高亮顯示。
router 屬性開啟了路由模式，使得點擊菜單能夠自動觸發(fā)路由跳轉(zhuǎn)。
unique-opened 保證了同一時間只有一個子菜單處于展開狀態(tài)，提升了菜單的交互體驗。
:collapse="isCollapse"：用于控制菜單的折疊狀態(tài)，根據(jù)傳入的 isCollapse 屬性值來決定菜單是否折疊顯示。
@select="changeMenu"：綁定了菜單選擇事件，當(dāng)用戶點擊菜單時，會觸發(fā) changeMenu 方法，后續(xù)我們再詳細講解這個方法的作用。
菜單分為兩級結(jié)構(gòu)：

一級菜單：<el-menu-item index="/dashboard"> 代表首頁菜單，有對應(yīng)的圖標<el-icon><Menu /></el-icon>和標題<template #title>首頁</template>。

二級菜單：通過 v-for 循環(huán)遍歷 routerList 數(shù)組來生成。每個二級菜單組由 <el-sub-menu> 包裹，標題部分同樣有圖標和名稱顯示，子菜單項通過內(nèi)層的 v-for 循環(huán) item.children 生成，每個子菜單項的 index 由父級路徑和自身路徑拼接而成，確保路由的準確性，并且展示對應(yīng)的 breadcrumbName 作為菜單名稱。

在腳本部分：

1、 模塊引入：

引入了項目的路由實例 router，這是 Vue Router 在項目中的核心模塊，用于管理路由相關(guān)操作。
引入了兩個自定義的 Vuex 存儲模塊：useAuthRouterStore 和 useTagStore，分別用于管理認證相關(guān)的路由信息和標簽列表信息。實例化 tagStore 和 authRouterStore 以便后續(xù)使用。

2、 組件屬性接收：

通過 defineProps(["isCollapse"]) 接收父組件傳入的 isCollapse 屬性，用于控制菜單的折疊狀態(tài)，與模板中的 :collapse="isCollapse" 相對應(yīng)。

3、 數(shù)據(jù)獲取與方法定義：

routerList = authRouterStore.routerList：從 authRouterStore 中獲取路由列表數(shù)據(jù)，這個數(shù)據(jù)應(yīng)該是經(jīng)過權(quán)限過濾等處理后的動態(tài)路由列表，用于在模板中生成側(cè)邊菜單。
changeMenu 方法：當(dāng)菜單被點擊時觸發(fā)。它首先在 routerOptions（通過 router.getRoutes() 獲取的所有路由配置信息）中查找與當(dāng)前點擊菜單 menu 對應(yīng)的路由對象 obj。然后，調(diào)用 tagStore.addTagList 方法，向標簽列表存儲中添加一個新的標簽對象，包含當(dāng)前點擊菜單對應(yīng)的路由路徑 name:obj.path 和面包屑名稱 breadcrumbName:obj.meta.breadcrumbName，這一步可能是用于記錄用戶的操作歷史或者構(gòu)建面包屑導(dǎo)航等功能。