vue多级菜单的实现

本次记录基于iview3框架实现多级菜单+vue router实现页面切换

方法一：

使用Tree 树形控件，官方文档https://www.iviewui.com/components/tree

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

思路：根据官方文档里面写用on-select-change事件返回当前已选中的节点数组、当前项，就利用返回的当前项数据拿到URL，并使用router跳转。

<template><div class="layout"><Layout><Header><Menu mode="horizontal" theme="dark" active-name="1"><div class="layout-logo"></div><div class="layout-nav"><MenuItem name="1"><Icon type="ios-navigate"></Icon>Item 1</MenuItem><MenuItem name="2"><Icon type="ios-keypad"></Icon>Item 2</MenuItem><MenuItem name="3"><Icon type="ios-analytics"></Icon>Item 3</MenuItem><MenuItem name="4"><Icon type="ios-paper"></Icon>Item 4</MenuItem></div></Menu></Header></Layout><Layout style="height: 100%;width: 100%;"><Sider hide-trigger breakpoint="md" width="200" :value=true>//方法一：使用Tree树控件,绑定点选事件<Tree :data="data1" @on-select-change="selectChange"></Tree>//方法二：使用menu导航菜单和递归<!--<SubItem :model="item" :sindex="index" v-for="(item,index) in data1" :key="index"></SubItem>--></Sider><Layout ><router-view></router-view></Layout></Layout></div></template>
<script>import SubItem from './SubItemm.vue'export default {components:{SubItem},data () {return {data1: [{title: 'parent 1',expand: true,url:null,children: [{title: 'parent 1-1',url:null,children: [{title: 'leaf 1-1-1',url:'/chpo/chpo/chpoShow'},{title: 'leaf 1-1-2',url:'/chpo/chpoCollection/chpocollectionshow'}]},{title: 'parent 1-2',url:null,children: [{title: 'leaf 1-2-1',url:'/company/course/courseshow'},{title: 'leaf 1-2-1',url:'/system/sysgamutgame/gamutgameshow'}]}]}]}}，methods:{selectChange(node,curr){//node 当前已选中的节点数组//curr 当前项,这里可是拿到当前项的数据，这样可以拿到跳转的URLif(curr.url)this.$router.push(curr.url)}}}
</script>

路由配置，这里子路由中的路径要和后端给出的路由地址保持一致，才能正确跳转

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 导航菜单和递归来实现，组件官方文档：https://www.iviewui.com/components/menu

思路：①根据官方文档 MenuItem有 to和target属性，使用其一都能实现跳转，但跳转结果可能不一样，这里使用to属性跳转

②在子组件内进行是否为最终子项，若不是则使用递归进行再次循环，直到最终子项

子组件

<template><Submenu :name="model.title" style="width: 200px"><template slot="title"  style="width: 200px">{{model.title}}</template>// v-if判断是否为最终的子项，如果是则进行MenuItem渲染，否则进行递归调用<MenuItem :name="item.title" v-for="item in model.children" :to="item.url" v-if="!item.children || item.children.length==0" :key="item.index" style="width: 200px">{{item.title}}</MenuItem>//递归调用<SubItem :model="item"  v-if="item.children&&item.children.length!==0" v-for="(item,index) in model.children" :key="index"></SubItem> </Submenu>
</template><script>export default {name: "SubItem", //至关重要的一步，一定要写name，递归的时候使用props:['model'],}
</script>

在父组件中调用，使用v-for循环组件，传入当前item值即可，调用的代码已经在上面写过，不在赘述。

在MenuItem上绑定属性:to 跳转的router路径，即可实现页面切换。

最后截图展示效果：

方法一：使用tree树形组件效果

方法二：Menu组件和递归使用效果

至此，两种方法写完了，自己学习记录，仅供参考思路。

THE END

vue多级菜单的实现相关推荐

mysql vue 菜谱_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
Vue 里，多级菜单要如何设计才显得专业？
老生常谈了! 虽然我们是 Java 猿,但是写起来前端代码也不含糊!今天我想来和大家聊聊这个前端的动态菜单,要如何设计才显得专业!还是以我们的 TienChin 项目为例,大家一起来看看. 先来一张截 ...
html手写vue多级选择框,vue多级多选菜单组件开发
本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表 ...
java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
关于若依框架多级菜单的设置
最近从php转到java,并且被要求用了一个叫若依的框架.然后有个需求需要用到三级菜单.按照二级菜单配置后前端的element-ui显示找不到该model.最后看官方文档,外加csdn的一个博客才给解 ...
day1 作业二：多级菜单操作
作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典要求:输入b返回上一层,输入q退出整个程序思路:三级菜单第一级别是省,第二级别是市,第三级别是县,用户 ...
【Pthon入门学习】多级菜单小例子
1 menu_list = { 2 '北京':{ 3 '昌平':{ 4 '回龙观':{ 5 '和谐家园':{}, 6 '矩阵小区':{}, 7 '北店家园':{} 8 }, 9 '沙河':{ 10 ' ...
java中菜单分几级_JAVA构造多级菜单
很多时候我们在前段展现时要用到多级菜单,刚好今天做了个简单的,整理一下: 首先我们要确定要展现的菜单结构: --根菜单 --一级菜单A --二级菜单A --三级菜单A --一级菜单B 与Hiberna ...
c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
qml中使用combobox实现多级菜单_excel实用技巧：如何构建多级下拉菜单
编按:哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的下拉菜单,可能就有点蒙圈了.其实用Excel制作三级下拉菜单,一点都不难,它就跟 ...

vue多级菜单的实现

vue多级菜单的实现相关推荐

最新文章

热门文章