vue3.0 Composition API 上手初体验用路由循环，做个导航菜单

╰+哭是因爲堅強的太久メ 2023-02-09 14:16 14阅读 0赞

# 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()` 函数，来获取我们配置的所有路由信息，打印数据如下图所示：

![format_png][]

从上图我们可以看到，其数据结构还是比较复杂的。而我们做一个导航菜单，完全没有必要使用如此复杂的数据。因此，我上面写了一个 `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` 普通组件，然后再这边只要引用注册并使用即可。

就这样吧，看效果：

![format_png 1][]

如上图所示，我们的每个页面上，都已经有了导航菜单了。

> 本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

--------------------

《vue3.0 Composition API 上手初体验》 文章目录地址： [https://blog.csdn.net/fungleo/category\_10020552.html][https_blog.csdn.net_fungleo_category_10020552.html] 我会不定期的补充一些相关内容，欢迎关注订阅！

文章代码仓库 [https://github.com/fengcms/vue3-demo][https_github.com_fengcms_vue3-demo] 会用 `git` 的朋友，可以去直接下载我的代码。当然，给我点个 `star` 啥的，也不是不可以的哈！

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vZnVuZ2xlby9teS1hcnRpY2xlLWltYWdlL3Jhdy9tYXN0ZXIvaW1hZ2UvNWIvMmY0MDI2ZGM0Mzc5ZWJiOGNiODRkMjFlZjhjZTYyLmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vZnVuZ2xlby9teS1hcnRpY2xlLWltYWdlL3Jhdy9tYXN0ZXIvaW1hZ2UvNmMvY2IxMTRlNjllZDQ2MDY2ZDBlZTcxMjNlY2JmNjM4LmpwZw?x-oss-process=image/format,png
[https_blog.csdn.net_fungleo_category_10020552.html]: https://blog.csdn.net/fungleo/category_10020552.html
[https_github.com_fengcms_vue3-demo]: https://github.com/fengcms/vue3-demo