vue实现多级菜单效果

 更新时间:2019年10月19日 14:38:32   作者:wangping146   我要评论
这篇文章主要为大家详细介绍了vue实现多级菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本次记录基于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-cli工程webpack的作用和特点

    脚手架vue-cli工程webpack的作用和特点

    webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
    2018-09-09
  • 详解Vue源码学习之双向绑定

    详解Vue源码学习之双向绑定

    这篇文章主要介绍了Vue源码学习之双向绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue-lazyload使用总结(推荐)

    vue-lazyload使用总结(推荐)

    vue项目用到vue-lazyload做图片懒加载,这篇文章主要介绍了vue-lazyload使用总结,解决这个插件的坑,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • vue高德地图之玩转周边

    vue高德地图之玩转周边

    vue高德地图,带你玩转周边,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue的事件绑定与方法详解

    vue的事件绑定与方法详解

    这篇文章主要为大家详细介绍了vue的事件绑定与方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue.js select下拉框绑定和取值方法

    vue.js select下拉框绑定和取值方法

    下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 100行代码实现一个vue分页组功能

    100行代码实现一个vue分页组功能

    今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能,感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • vue中实现methods一个方法调用另外一个方法

    vue中实现methods一个方法调用另外一个方法

    下面小编就为大家分享一篇vue中实现methods一个方法调用另外一个方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue中对拿到的数据进行A-Z排序的实例

    Vue中对拿到的数据进行A-Z排序的实例

    今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 简单实现vue中的依赖收集与响应的方法

    简单实现vue中的依赖收集与响应的方法

    这篇文章主要介绍了简单实现vue中的依赖收集与响应的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论