vue实现多级菜单效果
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
本次记录基于iview3框架实现多级菜单+vue router实现页面切换
方法一:
使用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 当前项,这里可是拿到当前项的数据,这样可以拿到跳转的URL if(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 导航菜单和递归来实现,组件官方文档
思路:①根据官方文档 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组件和递归使用效果
至此,两种方法写完了,自己学习记录,仅供参考思路。
更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:vue.js实现三级菜单效果