在 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

一、準(zhǔn)備工作

首先，確保你的 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 的圖標(biāo)名稱，實際依庫而定
}
},
{
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)的額外信息，如面包屑名稱和圖標(biāo)名稱，同時部分路由設(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 圖標(biāo)和平臺名稱的水平居中布局。當(dāng)側(cè)邊欄處于展開狀態(tài)（!isCollapse）時，顯示“后臺管理平臺”文字，logo 圖標(biāo)通過<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)的圖標(biāo)<el-icon><Menu /></el-icon>和標(biāo)題<template #title>首頁</template>。

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

在腳本部分：

1、 模塊引入：

• 引入了項目的路由實例 router，這是 Vue Router 在項目中的核心模塊，用于管理路由相關(guān)操作。
• 引入了兩個自定義的 Vuex 存儲模塊：useAuthRouterStore 和 useTagStore，分別用于管理認證相關(guān)的路由信息和標(biāo)簽列表信息。實例化 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 方法，向標(biāo)簽列表存儲中添加一個新的標(biāo)簽對象，包含當(dāng)前點擊菜單對應(yīng)的路由路徑 name:obj.path 和面包屑名稱 breadcrumbName:obj.meta.breadcrumbName，這一步可能是用于記錄用戶的操作歷史或者構(gòu)建面包屑導(dǎo)航等功能。

四、優(yōu)化與拓展

1、 權(quán)限控制：結(jié)合后端返回的用戶權(quán)限信息，在 filteredRoutes 計算屬性中進一步篩選，確保用戶只能看到有權(quán)訪問的菜單。例如，可以在路由的 meta 字段添加權(quán)限標(biāo)識，然后根據(jù)用戶的權(quán)限列表進行比對過濾。

2、 動態(tài)加載菜單：對于大型項目，一次性加載所有菜單可能影響初始加載性能。可以利用 Vue 的異步組件特性，在用戶點擊展開二級菜單或者進入特定模塊時，再動態(tài)加載子菜單對應(yīng)的組件，優(yōu)化資源利用。

3、 樣式定制：根據(jù)項目的設(shè)計風(fēng)格，深入定制側(cè)邊菜單的樣式，如顏色、字體、動畫效果等，提升用戶視覺體驗。

通過以上步驟，我們在 Vue3 中成功構(gòu)建了一個根據(jù)路由動態(tài)生成的側(cè)邊菜單系統(tǒng)，并且為后續(xù)的功能拓展和優(yōu)化鋪就了堅實道路，助力打造高效、易用的 Vue3 應(yīng)用。

到此這篇關(guān)于Vue3 中如何根據(jù)路由動態(tài)生成側(cè)邊菜單的文章就介紹到這了,更多相關(guān)vue3路由動態(tài)生成側(cè)邊菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論