Vue+Element 实现动态加载三级菜单路由方法

本文将介绍如何在Vue.js项目中结合Element UI库，通过动态加载路由的方式来实现一个包含三级菜单的页面显示。这种方法通常用于构建单页应用（SPA），以提高用户体验并优化页面加载效率。 在Vue.js中，动态加载路由是一种常见的实践，它允许我们在运行时根据用户权限或特定条件来加载不同的路由组件。这样做可以避免在初始化应用时一次性加载所有路由，从而减少首屏加载时间。在结合Element UI的项目中，我们可以利用其丰富的UI组件，如`el-menu`来创建美观的菜单结构。 首先，我们需要在`publish-center.vue`组件中设置一个`<router-view>`标签，这将作为路由视图，用于渲染对应路径的组件： ```html <template> <router-view></router-view> </template> ``` 接下来，我们处理`el-menu`元素，这是一个垂直菜单，我们将使用`default-active="$route.path"`来保持当前激活的菜单项与路由匹配，同时添加事件监听器如`@open`, `@close`和`@select`来响应菜单的展开、关闭和选中操作。`unique-opened`属性确保每次只能有一个子菜单打开： ```html <el-menu :default-active="$route.path" class="el-menu-vertical-demo el-menus" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened> <!-- 菜单项和子菜单项将在这里动态生成 --> </el-menu> ``` 为了动态生成菜单，我们需要遍历`$router.options.routes`，这包含了应用的所有路由定义。在`v-for`循环中，我们可以判断哪些路由需要显示为菜单项，哪些应该作为子菜单。如果路由有子路由并且不是叶子节点，那么就将其作为`el-submenu`，反之则作为`el-menu-item`。同时，我们可以利用Element UI提供的图标类（`item.iconCls`）来装饰菜单项。 ```html <template v-for="(item, index) in $router.options.routes" v-if="!item.hidden"> <el-submenu :index="index + ''" v-if="!item.leaf"> <!-- 子菜单内容 --> </el-submenu> <!-- ...其他菜单项和子菜单项的生成逻辑... --> </template> ``` 在处理多级菜单时，需要嵌套使用`el-submenu`和`el-menu-item`，并将每个子菜单项与对应的路由路径关联。对于有子路由的菜单项，再次遍历其`children`属性，并创建相应的`el-submenu`或`el-menu-item`。例如： ```html <el-submenu v-for="(child, indexs) in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"> <!-- 子菜单标题和内容 --> </el-submenu> ``` 最后，别忘了在`publish-center.vue`的`script`部分设置好相应的数据和方法，如`handleopen`, `handleclose`, 和 `handleselect`等，以便处理菜单的交互逻辑。 通过这种方式，我们能够构建一个基于Vue.js和Element UI的动态路由菜单系统，它可以灵活地根据用户角色或权限动态生成和显示菜单，同时保持良好的用户体验。在实际项目中，可能还需要结合Vue Router的守卫（guards）来控制路由的访问权限，以及考虑在服务端进行接口调用来获取动态菜单数据。