考慮以下菜單數據：
[ { name: "About", path: "/about", children: [ { name: "About US", path: "/about/us" }, { name: "About Comp", path: "/about/company", children: [ { name: "About Comp A", path: "/about/company/A", children: [ { name: "About Comp A 1", path: "/about/company/A/1" } ] } ] } ] }, { name: "Link", path: "/link" }];需要實現的效果：
首先創建兩個組件 Menu 和 MenuItem
// Menuitem<template> <li class="item"> <slot /> </li></template>
MenuItem 是一個 li 標簽和 slot 插槽，允許往里頭加入各種元素
<!-- Menu --><template> <ul class="wrapper"> <!-- 遍歷 router 菜單數據 --> <menuitem :key="index" v-for="(item, index) in router"> <!-- 對于沒有 children 子菜單的 item --> <span class="item-title" v-if="!item.children">{{item.name}}</span> <!-- 對于有 children 子菜單的 item --> <template v-else> <span @click="handleToggleShow">{{item.name}}</span> <!-- 遞歸操作 --> <menu :router="item.children" v-if="toggleShow"></menu> </template> </menuitem> </ul></template><script> import MenuItem from "./MenuItem"; export default { name: "Menu", props: ["router"], // Menu 組件接受一個 router 作為菜單數據 components: { MenuItem }, data() { return { toggleShow: false // toggle 狀態 }; }, methods: { handleToggleShow() { // 處理 toggle 狀態的是否展開子菜單 handler this.toggleShow = !this.toggleShow; } } };</script>Menu 組件外層是一個 ul 標簽，內部是 vFor 遍歷生成的 MenuItem
這里有兩種情況需要做判斷，一種是 item 沒有 children 屬性，直接在 MenuItem 的插槽加入一個 span 元素渲染 item 的 title 即可；另一種是包含了 children 屬性的 item 這種情況下，不僅需要渲染 title 還需要再次引入 Menu 做遞歸操作，將 item.children 作為路由傳入到 router prop
最后在項目中使用：
<template> <div class="home"> <menu :router="router"></menu> </div></template><script> import Menu from '@/components/Menu.vue' export default { name: 'home', components: { Menu }, data () { return { router: // ... 省略菜單數據 } } }</script>最后增加一些樣式：
MenuItem:
<style lang="stylus" scoped> .item { margin: 10px 0; padding: 0 10px; border-radius: 4px; list-style: none; background: skyblue; color: #fff; }</style>Menu:
<style lang="stylus" scoped> .wrapper { cursor: pointer; .item-title { font-size: 16px; } }</style>Menu 中 ul 標簽內的代碼可以單獨提取出來，Menu 作為 wrapper 使用，遞歸操作部分的代碼也可以單獨提取出來
總結
以上所述是小編給大家介紹的Vue 遞歸多級菜單的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
