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 属性的路由，来生成菜单数组。 这样，就可以实现动态路由菜单了。