vue3.0 Composition API 上手初體驗 用路由循環，做個導航菜單

vue3.0 Composition API 上手初體驗 用路由循環，做個導航菜單

通過前文的講述，我已經基本講清楚了 vue 3.0 的新特性，以及開發使用方法。只是演示 Demo 搞了好幾個頁面，只能輸入地址進行跳轉讓我不爽，於是，我給我的 Demo 代碼搞了個菜單，這裏，我把這部分內容講述一下。

重構 src/router/index.js 文件

在原來編寫的代碼中，我給單條路由只寫了 path 和 component 兩個參數，這裏，我們加上 meta 參數，併爲其設置 title 屬性。相關代碼如下：

// 構建我們的頁面路由配置，可以看到，這裏和原來的寫法並無二致。
const routes = [
  {
    path: '/',
    component: Home,
    meta: { title: '首頁-響應式數據計數器 Demo' }
  }, {
    path: '/about',
    component: () => import('@/views/About.vue'),
    meta: { title: '關於我們-響應式對象數據 Demo' }
  }, {
    path: '/life',
    component: () => import('@/views/Life.vue'),
    meta: { title: '生命週期 Demo' }
  }, {
    path: '/computed',
    component: () => import('@/views/Computed.vue'),
    meta: { title: '計算屬性 Demo' }
  }, {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    meta: { title: '普通組件 Demo' }
  }, {
    path: '/father',
    component: () => import('@/views/Father.vue'),
    meta: { title: '函數組件 Demo' }
  }
]

好的，通過上述的配置，我們需要的基礎數據已經有了。

編寫菜單函數組件

我們可以把菜單作爲一個函數組件，我們新建 src/components/Menu.js 文件，並錄入以下內容：

// 引入路由
import router from '@/router'
// 導出爲函數
export default () => {
  // 通過 getRoutes() 函數，獲取所有的路由信息
  const routes = router.getRoutes()
  const links = []
  // 循環路由信息，將數據整理並 push 到 links 數組
  routes.forEach((route, index) => {
    links.push({
      name: route.meta.title || `未命名${index}`,
      link: route.path
    })
  })
  // 將 links 數組返回
  return links
}

我們可以通過 vue-router 提供的 getRoutes() 函數，來獲取我們配置的所有路由信息，打印數據如下圖所示：

從上圖我們可以看到，其數據結構還是比較複雜的。而我們做一個導航菜單，完全沒有必要使用如此複雜的數據。因此，我上面寫了一個 forEach 循環，將數據整理了一下，並返回。

重寫 src/App.vue 引入菜單函數組件

少廢話，上代碼：

<template>
  <!-- 菜單 -->
  <ul>
    <li v-for="item in menus">
      <router-link :to="item.link">{{ item.name }}</router-link>
    </li>
  </ul>
  <!-- 路由視圖 -->
  <router-view />
</template>
<script>
// 引入 Menu 組件
import Menu from '@/components/Menu.js'

export default {
  setup () {
    // 獲取菜單數據並返回
    const menus = Menu()
    return {
      menus
    }
  }
}
</script>

說實話，不是很優雅。其實也可以換個做法，就是上面的 Menu.js 可以該寫成一個 vue 普通組件，然後再這邊只要引用註冊並使用即可。

就這樣吧，看效果：

如上圖所示，我們的每個頁面上，都已經有了導航菜單了。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！