本次记录基于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'
