vue 动态菜单

前言

前一篇文章中有说到,动态路由配合动态菜单使用有奇效
我在这里在做一篇动态菜单的博客
首先来说,动态菜单的核心便是编写一个递归组件,以达到根据后端传递过来的菜单集合自动生成菜单

组件介绍

首先这个递归组件是来自ETZHOU的手笔,我后续根据我自己的需求进行了调整,各位在使用的时候可以根据自身需求去调整内容.

1、子组件SidebarItem.vue





子组件是动态菜单的核心逻辑,通过v-if和v-else、v-else-if操作判断菜单是否还有下层

2、父组件Sidebar.vue




这里是父组件Sidebar.vue,将父组件引入你的页面中,给他传递对应的参数 menuList 便可成功引用
注意: 若直接复制代码不做修改请将父子组件放在同一个文件夹下,若是不在同一个文件夹请修改父组件中对子组件的引用。

引用

这里就更加简单了







直接从后端获取数据后直接传递进父组件中即可

后端支持

后端数据结构请看
vue动态路由
最后的后端支持

你可能感兴趣的:(vue.js)