Vue3 第十六篇：常用组件：无限级菜单组件

1.新建LeftMenu.jsx文件，内容如下： 

import router from '@/router'
import { ref } from 'vue'
// 菜单列表
const menuList = [
    {
        id: "1",
        name: '权限',
        children: [
            {
                id: "12",
                name: '菜单列表',
                children: [
                    {
                        id: "122",
                        name: '菜单列表',
                        url: '/layout/1'
                    }
                ]
            }
        ]
    },
    {
        id: "2",
        name: '角色',
        url: '/layout/2'
    }
]

export const isCollapse = ref(false)
// el-menu节点
const Menu = () => {



    const handleOpen = () => {
        layer.msg("成功消息", { icon: 1, time: 1000 })
    }

    const handleClose = () => {
        layer.msg("成功消息", { icon: 1, time: 1000 })
    }

    return (
        <>
            
                {
                    menuList.map(menu => {
                        if (menu.children) {
                            return 
                        } else {
                            return (
                                <>
                                    
                                
                            )
                        }
                    })
                }
            
        
    )
}

// el-sub-menu节点
const SubMenu = (props) => {
    const { menu } = props
    // 定义具名插槽：title
    const slots = {
        title: () => {
            return (
                <>
                    {menu.name}
                
            )
        }
    }

    return (
        <>
            {/* 传入插槽 */}
                {
                    menu.children.map(x => {
                        if (x.children) {
                            // 递归
                            return (
                                <>
                                    
                                
                            )
                        } else {
                            //实际节点，则渲染
                            return (
                                <>
                                    
                                
                            )
                        }
                    })
                }
            
        
    )
}



// el-menu-item节点
const MenuItem = (props) => {
    // 处理菜单被点击
    const handleMenuItemClick = () => {
        router.push(props.url)
    }

    return (
        <>
            
                {props.name}
            
        
    )
}

export default Menu

2.使用：

import Menu from '../nav/left-menu/LeftMenu';

 3.修改一下路由：

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: () => import('@/components/HelloWorld.vue')
        },
        {
            path: '/layout',
            component: () => import('@/components/layout/LayoutMain.vue'),
            children: [
                {
                    path: '1',
                    component: () => import('@/views/page1.vue')
                }, {
                    path: '2',
                    component: () => import('@/views/page2.vue')
                },
            ]
        }
    ]
})
export default router

3.效果