vue实现多级菜单效果

更新时间：2020-09-18 06:18:01 作者：startmvc

本次记录基于iview3框架实现多级菜单+vuerouter实现页面切换方法一：使用Tree树形控件，官方

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