之前看vue-element-admin这个模板项目的时候太敷衍了，看不懂就不看。

但是现在重新来看看，这个东西写的是真的有意思。

我最开始学的时候，做一个导航栏组件的时候，总是需要一边配置路由，一边还要配置导航栏的数组。

不能直接用router配置就很烦。

因为有的路由是有子路由的，而有的又没有子路由。

但是把router的数组用来写又会有问题。

而今天看了下vue-element-admin的导航栏菜单的写法，发现他用了一个vue文档上就有的方法。

递归组件。

当初看文档的时候觉得这个东西好像没啥用的样子，但是现在看来，其实是我当时没搞懂这个东西的用法罢了。

递归组件的用法是，可以将组件内引用组件本身。

也就是说

template

   div   v-if  ！obj.son

        {{obj}}

    div v-esle

         tree  v-for="child in item.son"  /

script

    name:tree

    porps:{obj:array}

差不多就是这个样子吧。

porps接受一个数组,这个时候需要用v-if来判断它是否有子数组。

如果没有，那就是正常的打印obj

如果有的话，那就循环赋值给自身

这样的话，就可以直接使用 router里的数组了

而且这样有个好处，那就是无论你有多少层子路由，它都可以通过递归来展示。

理论上只要页面允许，你可以无限递归展示子路由。

这个组件的路径在 vue-element-admin ---  @/layout/components/Sidebar/SidebarItem.vue

有兴趣的可以看看他里面写的代码。

注意如果要使用的话，script - export default 需要赋予 name这个属性 ,然后在组件里使用name作为标签，

然后就必须使用 v-if来判断，否则递归是无效的。

如果有更好的建议或者拓展，欢迎留言。