vue+quasar使用递归实现动态多级菜单

使用递归实现动态多级菜单通常用在需要动态循环渲染多级菜单的场景中，常见的应用场景包括权限管理系统或者多层级的导航菜单。

下面将介绍使用Vue.js和Quasar框架实现递归渲染多级菜单的完整攻略。

创建数据结构

首先需要定义一个数据结构来表示多级菜单，可以使用一个包含名称、路由等属性的对象。

{
  name: '菜单名称',
  route: '路由地址',
  children: [/* 子菜单 */]
}

其中，子菜单也是一个包含名称、路由等属性的对象。

接下来，创建一个多级菜单的数据结构。

menus: [
  {
    name: '首页',
    route: '/',
    children: [
      {
        name: '关于我们',
        route: '/about'
      },
      {
        name: '产品中心',
        route: '/product',
        children: [
          {
            name: '产品1',
            route: '/product/1'
          },
          {
            name: '产品2',
            route: '/product/2'
          }
        ]
      },
      {
        name: '联系我们',
        route: '/contact'
      }
    ]
  }
]

创建递归组件

使用Vue.js创建一个递归组件，可以使用<template>标签实现。

<template>
  <q-list dense>
    <q-item v-for="menu in menus" :key="menu.name" :to="menu.route">
      <q-item-section>{{ menu.name }}</q-item-section>
      <q-item-section side>
        <q-icon name="chevron_right" v-if="menu.children" />
      </q-item-section>
      <menu-recursive :menus="menu.children" v-if="menu.children" />
    </q-item>
  </q-list>
</template>

可以看出，上面的代码使用了v-for指令循环遍历多级菜单的数据结构，并使用条件渲染v-if指令判断是否有子菜单，如果有子菜单则递归渲染<menu-recursive>组件。

在组件中，需要遍历menus并递归渲染菜单。

<script>
export default {
  name: 'menu-recursive',
  props: {
    menus: {
      type: Array,
      default: () => []
    }
  }
}
</script>

示例说明

下面给出两个示例说明，分别是在菜单中添加图标和在路由中添加参数。

在菜单中添加图标

在菜单中添加图标需要在数据结构中添加一个icon属性，再在递归组件中渲染图标。

{
  name: '菜单名称',
  route: '路由地址',
  icon: '菜单图标',
  children: [/* 子菜单 */]
}

<template>
  <q-list dense>
    <q-item v-for="menu in menus" :key="menu.name" :to="menu.route">
      <q-item-section><q-icon :name="menu.icon" /></q-item-section>
      <q-item-section>{{ menu.name }}</q-item-section>
      <q-item-section side>
        <q-icon name="chevron_right" v-if="menu.children" />
      </q-item-section>
      <menu-recursive :menus="menu.children" v-if="menu.children" />
    </q-item>
  </q-list>
</template>

在路由中添加参数

在路由中添加参数需要在数据结构中添加一个params属性，再在递归组件中将参数添加到路由路径。

{
  name: '菜单名称',
  route: '路由地址/:参数名称',
  params: { /* 路由参数 */ },
  children: [/* 子菜单 */]
}

<template>
  <q-list dense>
    <q-item v-for="menu in menus" :key="menu.name" :to="getRoute(menu)">
      <q-item-section>{{ menu.name }}</q-item-section>
      <q-item-section side>
        <q-icon name="chevron_right" v-if="menu.children" />
      </q-item-section>
      <menu-recursive :menus="menu.children" v-if="menu.children" />
    </q-item>
  </q-list>
</template>

<script>
export default {
  name: 'menu-recursive',
  props: {
    menus: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getRoute(menu) {
      if (menu.params) {
        return {
          name: menu.route,
          params: menu.params
        }
      } else {
        return menu.route
      }
    }
  }
}
</script>

在示例中，使用了一个getRoute方法来处理带参数的路由，如果有参数则将参数添加到params选项中。在递归组件中渲染路由时，如果有参数则传递参数对象，否则只传递路由地址。