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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
JS实现网页端猜数字小游戏
Mar 06 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中的extract的作用分析
2008/04/09 PHP
php反弹shell实现代码
2009/04/22 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
PHP之header函数详解
2021/03/02 PHP
动态加载iframe
2006/06/16 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python Socket编程入门教程
2014/07/11 Python
python实现图片批量压缩程序
2018/07/23 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
料理师求职信
2014/01/30 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
pandas 实现将NaN转换为None
2021/05/14 Python
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
golang中字符串MD5生成方式总结
2021/07/04 Golang