vue3实现动态侧边菜单栏的几种方式总结

基于自建json数据的动态侧边菜单栏 

后端接口json数据

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: '设备管理',
            icon: 'icon-shebei',
            menuId: 2
        }
    ]
export default menuList;

home.vue页面上面显示该类型的菜单

在home.vue页面中import 这个文件 

遍历数组中的menulist 中的json数据，因为只遍历到第二层 因此只支持两层目录 即父-子

效果图

基于后端接口数据 实现动态侧边菜单栏 vue3+elementplus

后端菜单接口数据

目录结构为 父目录 系统管理  子目录  广告管理 APP上传。 遍历json数据  在v-for页面显示 name 名称

http://localhost:8000/api/menu

[
    {
        "id": 6,
        "url": "/",
        "path": "/home",
        "component": "Home",
        "name": "系统管理",
        "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数据形成的菜单 

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

ref可以是对象也可以是变量 reactive中必须是对象。。

ref使用变量 不管是获取还是使用 都需要加上 .value 

效果图