vue 怎么实现动态路由菜单

要实现动态路由菜单，可以按照以下步骤进行：

1. 在路由配置文件中，定义一个需要动态生成的路由数组，如下所示：

const dynamicRoutes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard'),
    meta: {
      title: 'Dashboard',
      icon: 'dashboard'
    }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/user'),
    meta: {
      title: 'User',
      icon: 'user'
    },
    children: [
      {
        path: 'list',
        name: 'UserList',
        component: () => import('@/views/user/list'),
        meta: {
          title: 'User List',
          icon: 'user'
        }
      },
      {
        path: 'detail/:id',
        name: 'UserDetail',
        component: () => import('@/views/user/detail'),
        meta: {
          title: 'User Detail',
          icon: 'user'
        }
      }
    ]
  }
]

2. 在路由配置文件中，定义一个路由表，包含所有静态路由和需要动态生成的路由，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import staticRoutes from './staticRoutes'
import dynamicRoutes from './dynamicRoutes'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    ...staticRoutes,
    ...dynamicRoutes
  ]
})

export default router

3. 在菜单组件中，根据路由表动态生成菜单，如下所示：

<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
    <template v-for="item in menuList">
      <template v-if="item.children">
        <el-submenu :index="item.path">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item :index="child.path" :key="child.path">
              <router-link :to="child.path">{{ child.meta.title }}</router-link>
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.path" :key="item.path">
          <i :class="item.meta.icon"></i>
          <router-link :to="item.path">{{ item.meta.title }}</router-link>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.menuList = this.$router.options.routes.filter(route => route.meta && route.meta.title)
  }
}
</script>

其中，menuList 是根据路由表生成的菜单数组。在 created 钩子中，我们通过过滤路由表中有 meta.title 属性的路由，来生成菜单数组。

这样，就可以实现动态路由菜单了。