溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本次記錄基于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 >
<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" >
<template slot="title" >
{{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" >{{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組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
