今天接到一个Vue的项目，开发并完善一套智能报价系统。这套系统原先已有团队开发了大部分功能，现在转到我们项目组接手并完善剩余功能。拿到代码迅速的运行了一下，简单的查看了下运行结果发现还存在很多问题。console显示200多个BUG。。。，还有这个导航总感觉怪怪的对吧。在开发新功能之前需要先把当前的BUG给解决了先。

BUG提示

看到这么多异常瞬间心慌呀，接手别人的项目其实很累的，每个人逻辑思维都存在差异，所以在布局和功能实现上会有很大的不同。但是问题竟然来了，躲是不可能的了只有一条条的来解决了。我们可以通过浏览器的【开发者工具】来查看和调试异常，最好可以通过安装Debugger for Chrome插件实现断点调试功能，这样可以快速的定位到问题所在代码上。来看第一个问题data functions should return an object，这里是说函数应该返回一个对象，下面有提示我们异常的文件路径。

查找问题

我们找到对应的文件，从代码可以看出这个是子菜单组件，用来显示左侧导航菜单中的子菜单选项。利用了element-ui组件来实现的，这里我们看到原先定义了route属性来指向Vue Router路径。但是这里应该用路由对象的而非字符串路径，所以我们才会遇到data functions should return an object错误。本来想在原有代码上进行修改的，结果看了原来的代码结构我有点懵了，下面还是我删除了很多子菜单的结果，想想每个菜单都el-menu-item不累么！还是自己来重构吧...

重构导航菜单

前面在文章【Vue实战053：el-menu组件实现路由导航菜单详解 】中有介绍如何来设计一个导航菜单，这里根据当前已有的代码结构来修改导航，包括路由的定义和获取，布局的调整和数据的应用等实现。这里我们分两部分组件来实现，同样利用element-ui组件中的el-menu来定义导航菜单。直接利用路由来动态配置导航栏信息，在NavMenu中index 是菜单的唯一标识符，当启用 vue-router 的模式时导航以 index 作为 path 进行路由跳转。

递归实现导航菜单

这里我利用递归的方式来实现导航菜单，通过组件在自己的模板中调用自身，递归必须定义name属性（调用组件名和组件属性name名需一致才能实现递归）而且一定要有结束条件，否则组件就会被循环引用最终出现“max stack size exceeded”的错误。 在el-menu标签中定义:default-active="$route.path"，这样当你刷新路由时就会自动定位但当前的路由位置。

改善效果

最后我们只要再来修改下路由配置就可以得到我们想要的菜单了，后续如果需要新增或者删减菜单也可以直接通过修改路由配置来更新导航菜单。最后来看下改善之后的效果吧，感觉还算理想吧，最开心的是console提示的错误竟然就因为这一个问题的解决也随着消失了。

?总结：

有时候虽然问题很多但是也不要惊慌，说不定哪个问题已解决其他的也就随着解决了呢？以上内容是小编给大家分享的【Vue实战076：导航菜单的BUG修复及优化】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。