php递归左侧导航栏,vue+elementUI使用递归实现左侧导航栏

一、首先自己写一个JSON文件，这个JSON文件就是我们需要的分类的列表。例如：

const menuList = [

{

title : '用户管理',

key : '/user',

icon : 'el-icon-user-solid',

},

{

title : '商品',

key : '/products',

icon : 'el-icon-s-goods',

children : [

{

title : '品类管理',

key : '/category',

icon : 'bars',

},

{

title : '商品管理',

key : '/product',

icon : 'tool',

}

]

},

{

title : '用户管理',

key : '/userss',

icon : 'user',

},

{

title : '角色管理',

key : '/role',

icon : 'safety'

},

{

title : '图形图表',

key : '/charts',

icon : 'area-chart',

children: [

{

title : '柱线图',

key : '/charts/bar',

icon : 'bar-chart'

},

{

title : '折线图',

key : '/charts/line',

icon : 'line-chart'

},

{

title : '饼图',

key : '/charts/pie',

icon : 'pie-chart'

},

]

},

]

export default menuList

二、首先在home组件使用element布局模板，然后引入我们刚才定义的json文件，并且定义给data中的leftMenus，然后创建一个自定义组件home-left，将我们的leftMenus传给home-left这个子组件

这里要注意:default-active，这个属性意思是哪一个菜单处于高亮状态，在这里我们可以根据路由来匹配，如果不这样做，当我们在已经选择界面刷新的时候，那么已经选择的菜单则不会处于高亮状态

router

:default-active="$route.path"

class="el-menu-vertical-demo"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

import menuList from '../../util/menuConfig'

export default {

components: {HomeLeft},

data() {

return {

leftMenus: menuList,

}

}

}

三、在子组件中我们需要使用props来接受传递过来的数据，并且在template中把遍历的children值再传递给自己这个组件，递归调用自己组件。这里的:index是唯一标志，:route是路由路径

:index="navMenu.key"

:route="navMenu.key"

>

{{navMenu.title}}

:key="navMenu.key"

:index="navMenu.key"

>

{{navMenu.title}}

export default {

name: 'NavMenu', //使用递归组件必须要有

props: ['navMenus'], // 传入子组件的数据

data() {

return {}

},

methods: {

handleSelect(key,keyPath){

console.log('1212')

console.log(key,keyPath)

}

}

}