快捷導(dǎo)航

vue實現(xiàn)多級菜單效果

更新時間：2019年10月19日 14:38:31 作者：wangping146

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本次記錄基于iview3框架實現(xiàn)多級菜單+vue router實現(xiàn)頁面切換

方法一：

使用Tree 樹形控件，官方文檔

以官方demo為例，數(shù)據(jù)中添加URL屬性，用于路由跳轉(zhuǎn)，正式項目中該tree控件的數(shù)據(jù)由后端給出，需要注意的是后端給出的URL跳轉(zhuǎn)地址最前一定要看清有沒有"/" ，如果沒有自己手動加或后端改，沒有這個"/" 斜杠會導(dǎo)致路由跳轉(zhuǎn)失敗。

思路：根據(jù)官方文檔里面寫用on-select-change事件返回當(dāng)前已選中的節(jié)點數(shù)組、當(dāng)前項，就利用返回的當(dāng)前項數(shù)據(jù)拿到URL，并使用router跳轉(zhuǎn)。

<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導(dǎo)航菜單和遞歸
   <!--<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 當(dāng)前已選中的節(jié)點數(shù)組
    //curr 當(dāng)前項,這里可是拿到當(dāng)前項的數(shù)據(jù)，這樣可以拿到跳轉(zhuǎn)的URL
    if(curr.url)
    this.$router.push(curr.url)
   }
  }
 }
</script>

路由配置，這里子路由中的路徑要和后端給出的路由地址保持一致，才能正確跳轉(zhuǎn)

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 導(dǎo)航菜單和遞歸來實現(xiàn)，組件官方文檔

思路：①根據(jù)官方文檔 MenuItem有 to 和 target 屬性，使用其一都能實現(xiàn)跳轉(zhuǎn)，但跳轉(zhuǎn)結(jié)果可能不一樣，這里使用to屬性跳轉(zhuǎn)

②在子組件內(nèi)進(jìn)行是否為最終子項，若不是則使用遞歸進(jìn)行再次循環(huán)，直到最終子項

子組件

<template>
 <Submenu :name="model.title" style="width: 200px">
 <template slot="title" style="width: 200px">
  {{model.title}}
 </template>
 // v-if判斷是否為最終的子項，如果是則進(jìn)行MenuItem渲染，否則進(jìn)行遞歸調(diào)用
 <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>
  //遞歸調(diào)用
 <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", //至關(guān)重要的一步，一定要寫name，遞歸的時候使用
  props:['model'],
 }
</script>

在父組件中調(diào)用，使用v-for循環(huán)組件，傳入當(dāng)前item值即可，調(diào)用的代碼已經(jīng)在上面寫過，不在贅述。

在MenuItem上綁定屬性:to 跳轉(zhuǎn)的router路徑，即可實現(xiàn)頁面切換。

最后截圖展示效果：

方法一：使用tree樹形組件效果