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组件学习教程进行学习。

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

时间: 2019-10-18

浅谈Vue.js中如何实现自定义下拉菜单指令

我们利用  Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能.描述如下: 点击按钮,弹出下拉菜单. 点击下拉菜单之外的区域,关闭下拉菜单. 1基础版 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshee

基于vue.js实现侧边菜单栏

侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ

Vue.js下拉菜单组件使用方法详解

本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

vue下拉菜单组件(含搜索)的实现代码

之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 dropdown.vue <template> <div class="vue-dropdown default-theme"> <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div> <div clas

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

详解Vue用自定义指令完成一个下拉菜单(select组件)

这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为

Vue.js 递归组件实现树形菜单(实例分享)

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

vue.js实现二级菜单效果

本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下 主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

Vue实现自定义下拉菜单功能

先看例子,后面有对用到的知识点的总结 效果图: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件练习</title> <link rel="stylesheet" type="text/css" href="component.c

vue实现带过渡效果的下拉菜单功能

本文实例为大家分享了vue中仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下 效果图 clickOutside.js 点击目标之外的地方,下拉框隐藏 代码如下: export const clickOutside = { bind(el, binding, vnode) { function documentHandler(e) { if (el.contains(e.target)) { return false; } if (binding.expression) { bi

AngularJS实现的select二级联动下拉菜单功能示例

本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"

JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

本文实例讲述了JS实现经典的中国地区三级联动下拉菜单功能.分享给大家供大家参考,具体如下: 1.首先是js文件(area.js): function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined&q

jQuery实现的无限级下拉菜单功能示例

本文实例讲述了jQuery实现的无限级下拉菜单功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单(无限级)</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none;

JavaScript下拉菜单功能实例代码

本文给大家分享一段实例代码关于js实现下拉菜单功能,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo

Bootstrop实现多级下拉菜单功能

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap多级下拉菜单功能的实例代码. 先给大家看下效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 <head> <meta charset="UTF-8"> <title>Boots

jQuery点击页面其他部分隐藏下拉菜单功能

一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了. 二.代码 HTML: <div class="select_box" id="selected"> <div class="select"> <sp

jQuery实现的点击显示隐藏下拉菜单功能完整示例

本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j