vue实现多级菜单效果

本次记录基于iview3框架实现多级菜单某视频剪辑软件路由器实现页面切换

方法一：

使用树树形控件，官方文档

以官方演示为例，数据中添加统一资源定位器属性，用于路由跳转，正式项目中该树控件的数据由后端给出，需要注意的是后端给出的统一资源定位器跳转地址最前一定要看清有没有'/',如果没有自己手动加或后端改，没有这个'/' 斜杠会导致路由跳转失败。

思路：根据官方文档里面写用选择时更改事件返回当前已选中的节点数组、当前项，就利用返回的当前项数据拿到网址，并使用路由器跳转。

模板div class='布局'布局标题菜单模式='水平'主题='深色'活动-名称=' 1 ' div class=' Layout-logo '/div class=' Layout-nav ' MenuItem名称=' 1 '图标类型=' IOs-导航'/图标项目1 /MenuItem MenuItem名称='2 '图标类型=' IOs-键盘'/图标项目2 /MenuItem MenuItem名称='3 '图标类型=' IOs-分析'/图标项目3 /MenuItem MenuItem名称='宽度： 100%;“侧面隐藏触发器断点=' MD '宽度=' 200 ' :值=true//方法一：使用树树控件，绑定点选事件Tree :数据=' data 1 ' @ on-select-change=' selectChange '/Tree//方法二：使用菜单导航菜单和递归！-SubItem :模型=' item ' :索引=' index ' v-for='(item，index)在数据1 ' :键='索引'/子项-/Sider Layout路由器-视图/路由器-视图/布局/div/模板脚本导入子项自' ./SubmItem。vue ' export default { components 3360 { SubmIt }，data(){ return { data 1:[{ title : ' parent 1 '，expand: true，url:null，children :[{ title : ' leaf 1-1-1 '，URL : '/chpo/chpospo当前已选中的节点数组//curr当前项，这里可是拿到当前项的数据，这样可以拿到跳转的如果(curr.url)这个$路由器。推(当前。URL)} } }/脚本路由配置，这里子路由中的路径要和后端给出的路由地址保持一致，才能正确跳转

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从" @/组件/组件1 "导入组件2从" @/组件/组件2 "导入组件3从" @/组件/组件3 "导入组件4从" @/组件/组件4 "导入索引从./view/Index' Vue.use(路由器)导出默认的新路由器({路由器：[{路径： '/'，名称： '索引'，组件：指数，子级：[{ path : '/chpo/chpo/chpoShow '，名称： '组件1 '，组件： component1 }，{ path : '/chpo collection/chpocollectionshow '，名称33366方法二：

使用菜单导航菜单和递归来实现，组件官方文档

思路：根据官方文档菜单项有到和目标属性，使用其一都能实现跳转，但跳转结果可能不一样，这里使用到属性跳转

(2)是否是最终子项在子组件中执行，如果不是，则使用递归再次循环，直到最终子项。

子组件

模板子菜单： name=' model . title ' style=' width : 200 px '模板槽=' title ' style=' width : 200 px ' { model . title } }/template//V-如果判断是否为最终子项，如果是，menuitem3360 name=' item。模型中的标题“v-for=”项。子项' : to='项。URL' v-if='！item . children | | item . children . length==0 ' : key=' item . index ' style=' width : 200px ' { item . title } }/menuitem//递归调用subitem 3360 model=' item ' v-if=' item。==模型中的0' v-for='(项，索引)。children ' : key=' index '/子项/子菜单/模板脚本导出默认值{name :' subitem '，//至关重要的一步。一定要写名字。递归时，使用prop :[' model ']，}/script调用父组件，使用v-for循环组件并传入当前项值。上面已经写好了被调用的代码，所以没有必要重复。

页面切换可以通过绑定属性：的路由器路径在MenuItem上跳转来实现。

最后的截图显示了效果：

方法1:使用树树组件效果

方法2:菜单组件和递归使用效果

至此，两种方法都写好了，学习记录仅供参考。

点击《Vue.js前端组件学习教程》获取更多教程。欢迎学习和阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。