Vue中怎么遞歸多級(jí)菜單，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站專注于朔城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供朔城營銷型網(wǎng)站建設(shè)，朔城網(wǎng)站制作、朔城網(wǎng)頁設(shè)計(jì)、朔城網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造朔城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供朔城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

考慮以下菜單數(shù)據(jù)：

[
 {
 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"
 }
];

需要實(shí)現(xiàn)的效果：

首先創(chuàng)建兩個(gè)組件 Menu 和 MenuItem

// Menuitem

MenuItem 是一個(gè) li 標(biāo)簽和 slot 插槽，允許往里頭加入各種元素

Menu 組件外層是一個(gè) ul 標(biāo)簽，內(nèi)部是 vFor 遍歷生成的 MenuItem

這里有兩種情況需要做判斷，一種是 item 沒有 children 屬性，直接在 MenuItem 的插槽加入一個(gè) span 元素渲染 item 的 title 即可；另一種是包含了 children 屬性的 item 這種情況下，不僅需要渲染 title 還需要再次引入 Menu 做遞歸操作，將 item.children 作為路由傳入到 router prop

最后在項(xiàng)目中使用：

最后增加一些樣式：

MenuItem:

 .item {
 margin: 10px 0;
 padding: 0 10px;
 border-radius: 4px;
 list-style: none;
 background: skyblue;
 color: #fff;
 }

Menu:

 .wrapper {
 cursor: pointer;

 .item-title {
  font-size: 16px;
 }
 }

Menu 中 ul 標(biāo)簽內(nèi)的代碼可以單獨(dú)提取出來，Menu 作為 wrapper 使用，遞歸操作部分的代碼也可以單獨(dú)提取出來

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。