本文介绍如何在Vue.js应用中实现侧边栏的递归渲染。通过从vue-router中获取静态路由信息，结合hidden属性来决定哪些路由应该在侧边栏显示。在侧边栏组件中，通过递归调用自定义的Menu组件，根据路由的children属性判断并渲染一级或多级路由。在Menu组件内部，利用Vue 3的模板语法进行插槽处理，确保在children为空时渲染最终节点，否则继续递归渲染子菜单。
先从我们vue-router里面提取出静态路由的信息，结构赋值提取出路由器里面的options，options.routes是我们的全部静态路由，方便我们后续对侧边栏的渲染
也有另外一种获取路由的方法
这是我们要渲染的侧边栏数据结构
这是登录和注册和一些全局的路由，这些路由是不需要渲染到我们菜单的侧边栏，所以在路由信息里面加上hidden: true 属性。（hidden属性是为后面渲染时做判断的）
（侧边栏aside页面）
然后我们开始渲染侧边栏，先判断是一级路由是否hidden为true，我们取反，渲染不为true的路由，根据当前路由是否带有children属性去判断当前路由是一级路由还是多级路由，如果是多级路由，我们调用自己
最低0.47元/天 解锁文章
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
