Vue 巧用路由配置递归打造动态菜单栏

2024-01-08 05:54:56

导语

在构建项目时，菜单栏作为项目骨架，是用户交互的重要组成部分。传统菜单栏的实现方式多为手动添加路由，但这不够灵活，每添加一个菜单都要进行配置，繁琐且容易出错。本文将介绍一种利用 Vue 路由配置和递归实现菜单栏的技巧，让菜单栏管理变得更加高效。

正文

1. 路由配置的奥秘

在 Vue 项目中，路由配置是管理页面导航的重要一环。通过配置路由，我们可以定义不同页面的路径和组件。本文中，我们将利用路由配置来实现菜单栏的动态生成。

路由配置通常存储在一个名为 router.js 的文件中，它包含了所有页面路由的映射关系。在传统的实现方式中，每个菜单项都对应一个路由配置项，如下所示：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

2. 递归的妙用

为了实现动态菜单栏，我们需要一种方法来根据路由配置自动生成菜单项。为此，我们将使用递归函数来遍历路由配置，并生成对应的菜单结构。

递归函数是一种函数调用自身的方法，它可以有效地解决层级结构的数据处理问题。在我们的场景中，路由配置是一个树状结构，每个路由项可以包含子路由项，这非常适合使用递归来处理。

3. 代码实践

以下代码展示了如何使用递归函数生成菜单项：

function generateMenu(routes) {
  return routes.map(route => {
    if (route.children) {
      return {
        title: route.name,
        icon: route.meta.icon,
        children: generateMenu(route.children)
      }
    } else {
      return {
        title: route.name,
        icon: route.meta.icon,
        path: route.path
      }
    }
  })
}

在这个函数中，我们遍历了路由配置，如果当前路由项包含子路由项，则递归调用函数来生成子菜单。否则，直接生成一个菜单项，包含标题、图标和路径。

4. 实战应用

有了生成菜单项的函数，我们就可以在 Vue 组件中使用它来创建动态菜单栏：

<template>
  <nav>
    <ul>
      <li v-for="menu in menus" :key="menu.path">
        <router-link :to="menu.path">{{ menu.title }}</router-link>
        <ul v-if="menu.children">
          <li v-for="child in menu.children" :key="child.path">
            <router-link :to="child.path">{{ child.title }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
import { generateMenu } from '@/utils/menu'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const menus = generateMenu(router.options.routes)
    return { menus }
  }
}
</script>