这篇文章主要为大家详细介绍了vue实现多级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本次记录基于iview3框架实现多级菜单+vue router实现页面切换
方法一：
使用Tree 树形
控件，官方文档
以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有“/” ，如果没有自己手动加或后端改，没有这个“/” 斜杠会导致路由跳转失败。
思路：根据官方文档里面写用on-select-change事件返回当前已选中的节点数组、当前项，就利用返回的当前项数据拿到URL，并使用router跳转。
<div class="layout"> <header> <menu> <div class="layout-logo"></div><div class="layout-nav"> Item 1 Item 2 Item 3 Item 4 </div></menu></header> //方法一：使用Tree树控件,绑定点选事件 //方法二：使用menu导航菜单和递归 <!----> </div>
路由配置，这里子路由中的路径要和后端给出的路由地址保持一致，才能正确跳转
import Vue from 'vue' import Router from 'vue-router' import component1 from '@/components/component1' import component2 from '@/components/component2' import component3 from '@/components/component3' import component4 from '@/components/component4' import Index from '../view/Index' Vue.use(Router) export default new Router({ routes: [ { path: '/', name:'Index', component: Index, children:[ { path: '/chpo/chpo/chpoShow', name:'component1', component: component1 }, { path: '/chpo/chpoCollection/chpocollectionshow', name:'component2', component: component2 }, { path: '/company/course/courseshow', name:'component3', component: component3 }, { path: '/system/sysgamutgame/gamutgameshow', name:'component4', component: component4 }, ] }, ] })
方法二：
使用Menu 导航菜单和递归来实现，组件官方文档
思路：①根据官方文档 MenuItem有 to 和 target 属性，使用其一都能实现跳转，但跳转结果可能不一样，这里使用to属性跳转
②在子组件内进行是否为最终子项，若不是则使用递归进行再次循环，直到最终子项
子组件
{{model.title}} // v-if判断是否为最终的子项，如果是则进行MenuItem渲染，否则进行递归调用 {{item.title}} //递归调用
在父组件中调用，使用v-for循环组件，传入当前item值即可，调用的代码已经在上面写过，不在赘述。
在MenuItem上绑定属性:to 跳转的router路径，即可实现页面切换。
最后截图展示
方法一：使用tree树形组件效果
方法二：Menu组件和递归使用效果
至此，两种方法写完了，自己学习记录，仅供参考思路。
更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue实现多级菜单效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue实现多级菜单效果
