vue3實現(xiàn)動態(tài)側(cè)邊菜單欄的幾種方式簡單總結(jié)

更新時間：2024年02月22日 08:48:51 作者：村長在路上

在做開發(fā)中都會遇到的需求,每個用戶的權(quán)限是不一樣的,那他可以訪問的頁面(路由)可以操作的菜單選項是不一樣的,如果由后端控制,我們前端需要去實現(xiàn)動態(tài)路由,動態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)動態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下

基于自建json數(shù)據(jù)的動態(tài)側(cè)邊菜單欄

后端接口json數(shù)據(jù)

src/api/menuList.js

const  menuList = [
        {
            url: '',
            name: '人員管理',
            icon: 'icon-renyuan',
            menuId: 1,
            children: [
                {
                    url: '/user',
                    name: '用戶管理',
                    icon: 'icon-jurassic_user',
                    menuId: 1001,
                    children: []
                },
                {
                    url: '/role',
                    name: '角色管理',
                    icon: 'icon-jiaose',
                    menuId: 1002,
                    children: []
                }
            ]
        },
        {
            url: '/device',
            name: '設(shè)備管理',
            icon: 'icon-shebei',
            menuId: 2
        }
    ]
export default menuList;

home.vue頁面上面顯示該類型的菜單

在home.vue頁面中import 這個文件

遍歷數(shù)組中的menulist 中的json數(shù)據(jù)，因為只遍歷到第二層因此只支持兩層目錄即父-子

<template>
  <div class="common-layout">
    <--! 基于elementplus的側(cè)邊欄標簽-->
        <el-aside width="400px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  :router="true"
              >
                <el-sub-menu index="1" v-for="item in menuList" :key="item.id">
                  <!--一級模板區(qū)域 -->
                  <template #title>
                    <el-icon class="item.iconCls"/>
                    <span>{{ item.name}}</span>
                  </template>
                  <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
                    <template #title>
                      <span>{{subItem.name}}</span>
                    </template>
                  </el-menu-item>
                </el-sub-menu>
   </el-menu>
            </el-col>
            </el-row>
        </el-aside>
 </el-container>
    </el-container>
  </div>
</template>
<script>
import menuList from "@/api/mockdata/menList";  //根據(jù)自己的路徑來
export default {
  name: "Home",
  data(){
    return {
      menuList
    }

  },
}
</script>
<style >
</style>

效果圖

基于后端接口數(shù)據(jù) 實現(xiàn)動態(tài)側(cè)邊菜單欄 vue3+elementplus

后端菜單接口數(shù)據(jù)

目錄結(jié)構(gòu)為父目錄系統(tǒng)管理子目錄廣告管理 APP上傳。遍歷json數(shù)據(jù) 在v-for頁面顯示 name 名稱

http://localhost:8000/api/menu

[
    {
        "id": 6,
        "url": "/",
        "path": "/home",
        "component": "Home",
        "name": "系統(tǒng)管理",
        "iconCls": "fa fa-windows",
        "enabled": true,
        "children": [
            {
                "id": 30,
                "url": null,
                "path": "/sys/ad",
                "component": "SysAd",
                "name": "廣告管理",
                "iconCls": "fa fa-ad",
                "meta": null,
                "parentId": 6,
                "enabled": true,
                "children": null,
                "roles": null
            },
            {
                "id": 7,
                "url": null,
                "path": "/sys/app",
                "component": "SysApp",
                "name": "App上傳",
                "iconCls": "fa-solid fa-circle-arrow-up",
                "meta": null,
                "parentId": 6,
                "enabled": true,
                "children": null,
                "roles": null
            }
        ],
        "roles": null
    }
]

在 home.vue中顯示此json數(shù)據(jù)形成的菜單

vue3包含的data() mounted() methods() 方法被一個 setup方法全包了

ref可以是對象也可以是變量 reactive中必須是對象。。

ref使用變量不管是獲取還是使用都需要加上 .value

<template>
  <div class="common-layout">
      <el-container>
        <el-aside width="400px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  :router="true"
              >
                <el-sub-menu index="1" v-for="item in menuList" :key="item.id">
                  <!--一級模板區(qū)域 -->
                  <template #title>
                    <el-icon class="item.iconCls"/>
                    <span>{{ item.name}}</span>
                  </template>
                  <!-- 二級目錄遍歷 json中的children 顯示name:中的內(nèi)容-->
                  <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
                    <template #title>
                      <span>{{subItem.name}}</span>
                    </template>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
            </el-row>
        </el-aside>
        
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Document, Location, Setting, Burger} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted,ref } from 'vue'
import  {useStore} from "vuex";
export default {
  name: "Home",
  components: {Burger, Setting, Document, Location},
  setup() {
    // vue3推薦使用ref 實現(xiàn)響應式數(shù)據(jù) 數(shù)據(jù)實時顯示  將后端接受的數(shù)據(jù)賦值給ref 
    const menuList = ref();
    onMounted(()=>{
      axios.get("/api/menu").then(res =>{
        console.log("onMounted")
        const data = res.data
        console.log(data)
        menuList.value = data
      })
    })
    return {
      menuList
    }
  },
  

}
</script>

<style >
.homeHeader{
  background-color: #04befe;
  /*彈性展示*/
  display: flex;
  /* 居中對齊彈性盒子的各項 div 元素*/
  align-items: center;

}

.mainTitle{
  /* 規(guī)定元素中文本的水平對齊方式 居中*/
  text-align: center;
  /* 顏色為深空色*/
  color: deepskyblue;
  /* 字體大小*/
  font-size: 30px;
  /* 距離頂部的距離為 20px 數(shù)值越大下降位置越多*/
  //padding-top: 20px;
}
.headerTitle{
  /*字體大小*/
  font-size: 20px;
  /* 字體顏色*/
  color: #fffff9;
}
//標簽換行樣式 vue3中不支持標簽頁換行
.text-wrapper {
  display: inline-block;
  word-break: break-all;
  word-wrap: break-word
}
</style>

效果圖