专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 用路由循环,做个导航菜单

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

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

通过前文的讲述,我已经基本讲清楚了 vue 3.0 的新特性,以及开发使用方法。只是演示 Demo 搞了好几个页面,只能输入地址进行跳转让我不爽,于是,我给我的 Demo 代码搞了个菜单,这里,我把这部分内容讲述一下。

重构 src/router/index.js 文件

在原来编写的代码中,我给单条路由只写了 pathcomponent 两个参数,这里,我们加上 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 普通组件,然后再这边只要引用注册并使用即可。

就这样吧,看效果:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用

    前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋,目前我们几乎不可能开发只有一个页面的应用。因此,vue-router 是必不可少的...

    FungLeo
  • Linux\Mac 递归移除某文件夹下所有文件(不包含文件夹)的执行权限命令

    今天别人给了我传了一个文件夹,里面是一个项目代码。我查看了一下,发现所有文件都是有执行权限的。这让我很不爽,于是我将所有文件(不包含文件夹)的执行权限全部去掉。...

    FungLeo
  • javascript 商城结算页面选择今日或明日送货时间数组的实现

    今日在开发一个生鲜商城的项目,其中结算页面有一个需求。大概意思如下,后端会返回该店铺每日的营业时间,格式是 { startTime: '09.00', endT...

    FungLeo
  • Leetcode打卡 | No.015 三数之和

    欢迎和小詹一起定期刷leetcode,每周一和周五更新一题,每一题都吃透,欢迎一题多解,寻找最优解!这个记录帖哪怕只有一个读者,小詹也会坚持刷下去的!

    小小詹同学
  • 折半查找

        public static void main(String[] args) {         int[] nums = {1, 2, 3, 4, ...

    用户2192970
  • Linux tcp/ip 源码分析 - listen

    // net/socket.c SYSCALL_DEFINE2(listen, int, fd, int, backlog) { struct socket...

    wangyuntao
  • PostgreSql 学了还是乱麻,那就捋一捋 DB架构

    其实学习的过程中,很容易陷入一个问题,貌似都懂,一问就含糊,今天就自己捋一捋的那团乱麻。

    AustinDatabases
  • paxos分布式一致性算法–讲述诸葛亮的反穿越

    一日,诸葛亮找到刘备,突然献上一曲《独角戏》,而后放声大哭。刘备正沉醉于新曲,暗叹孔明大才,竟作得如此不凡仙乐,看到孔明忽而大悲,慌问:“水,何事悲恸?”

    陶辉
  • 从冷战到深度学习:一篇图文并茂的机器翻译史

    选自Vas3k.com 作者:Ilya Pestov 英语版译者:Vasily Zubarev 中文版译者:Panda 实现高质量机器翻译的梦想已经存在了很多年...

    机器之心
  • 安装influxdb监控套件

    进入 https://grafana.com/dashboards/928 按它的配置,修改telegraf的配置。 下载json文件,进入new dash...

    超级大猪

扫码关注云+社区

领取腾讯云代金券