最近开发后台，因为不想使用 ElementUI 和其他现成的 UI 框架，于是决定自己做。

碰到的第一个难题就是多级菜单。

因为之前没做过，第一次做起来还是有点难的，最后实现的效果是这样。注意看地址栏。

多级菜单的收缩，展开都是使用 CSS 控制，所以要配合 Vue 传值判断是否 active

在父组件加入 activeItem 告诉子组件哪个索引是活跃的。

菜单由于考虑是多级的，所以我们需要封装成一个组件，并且需要使用组件的递归调用自身已实现多级。

在父组件中，我们可以使用这种形式来记录菜单数据。

Item 是一个菜单的每一个小项。他接受来自父组件的 items 数组，然后使用 v-for 渲染每一个子菜单（不是一级菜单，是多级菜单的递归渲染）。在父组件中，也通过 v-for 渲染一级菜单。

子菜单中判断是否活跃一样是通过上级的 activeItem 是否等于 this.index

以上步骤已经实现了对菜单加入和取消 CSS类 active 和 hide。

接下来就只要写这两个样式就行了。

这里就不说了，菜单的收缩可以使用 max-height 属性。

到这，我已经查了很多文章，也想了很久，可能是我比较笨吧，一直没想出来。

最后，我想到了点击菜单时，先判断是不是尾菜单，就是不含子菜单的菜单，不可再下拉。

如果是，就合并上一级菜单的 path，（注意看前面的 path

那么只要在 handleClick 的时候加一层判断和跳转就行了。

最后贴一张想了很久画了很久的手稿，字丑勿喷。