vue实现多级菜单效果


Posted in Javascript onOctober 19, 2019

本次记录基于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树形组件效果

vue实现多级菜单效果

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

vue实现多级菜单效果

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

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
js word表格动态添加代码
Jun 07 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
纯js实现手风琴效果
Apr 17 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python实现ID3决策树算法
2018/08/29 Python
python实现密码强度校验
2020/03/18 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
SQL注入攻击的种类有哪些
2013/12/30 面试题
自我鉴定范文300字
2013/10/01 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android