vue侧边栏递归渲染

先从我们vue-router里面提取出静态路由的信息，结构赋值提取出路由器里面的options，options.routes是我们的全部静态路由，方便我们后续对侧边栏的渲染

也有另外一种获取路由的方法

 

这是我们要渲染的侧边栏数据结构

这是登录和注册和一些全局的路由，这些路由是不需要渲染到我们菜单的侧边栏，所以在路由信息里面加上hidden: true 属性。（hidden属性是为后面渲染时做判断的）

​

（侧边栏aside页面） 

然后我们开始渲染侧边栏，先判断是一级路由是否hidden为true，我们取反，渲染不为true的路由，根据当前路由是否带有children属性去判断当前路由是一级路由还是多级路由，如果是多级路由，我们调用自己封装的多级路由组件，并把当前项传进去

  这是我们封装的Menu组件，vue3里面的插槽方式改变了，要采用template包裹起来。能进这个Menu组件的，证明这项是包含children属性的一项路由信息，我们接收了这一项数据，然后去判断这一项的children数组的长度，只有当数组里面的长度为真才能证明children数组里面才有内容，然后我们去循环children数组里面的内容，我们的重点来了，如果children里面的当前项没有children属性了，证明这项已经到底了，直接渲染就行了，如果children里面的当前项包含children属性，我们可以在Menu组件里面再次调用Menu组件，把这一项的数据传过去，这样就形成递归了。

这里有重要的一点

 必须为Menu组件定义props属性去接收传过来的值。默认是一个空对象，是一个对象类型的值。