浅浅element-ui导航栏封装使用学习一下

封装组件SubMenu.vue:





使用:


    

(这里导航数据是后台获取的)usermenu数据格式:

usermenu:[
    {
        menuId:'1',
        name:'一级菜单1',
        url:'./views/homePage',
        hasChildren:0,
        childList:[]
    },
    {
        menuId:'2',
        name:'一级菜单2',
        url:'',
        hasChildren:2,
        childList:[
            {
                menuId:'2-1',
                name:'二级菜单',
                url:'./views/Test',
                hasChildren:0,
                childList:[]
            },
            {
                menuId:'2-2',
                name:'二级菜单',
                url:'./views/Test2',
                hasChildren:0,
                childList:[]
            },
        ]
    },
    {
        menuId:'3',
        name:'一级菜单3',
        url:'./views/Test3',
        hasChildren:0,
        childList:[]
    },
]

url路径为定义的对应路由路径

最终实现:

浅浅element-ui导航栏封装使用学习一下_第1张图片

 

 

菜鸟学习记录,如有侵犯,请联系删除,如有任何问题请大佬们多多指教,O(∩_∩)O谢谢 

你可能感兴趣的:(web,elementui,vue.js,javascript)