Vue3 中如何加载动态菜单?

发布网友发布时间：2024-09-26 10:08

共1个回答

热心网友时间：2024-11-12 14:35

Vue3 中动态菜单的加载涉及前端与后端交互及状态管理。首先，当从后端接收到菜单 JSON 数据后，我们需要在 vuex 中存储，以保证所有 .vue 文件都能访问到。然而，vuex 中的数据在浏览器刷新后会丢失，因此需要利用路由导航守卫判断是页面跳转还是刷新，以决定是否重新加载菜单。

具体实现如下：在main.js的入口文件中，通过引入src/permission.js，其中的前置导航守卫负责监控页面跳转。在src/store/moles/user.js中，通过调用getInfo方法获取用户信息并存储在vuex中。在src/store/moles/permission.js的generateRoutes方法中，解析并处理服务端返回的动态菜单数据，生成routes、sidebarRouters、topbarRouters和defaultRoutes四个变量，分别用于侧边栏、顶部菜单、默认路由等场景。

菜单渲染在src/layout/components/Sidebar/index.vue中完成，其中的逻辑相对简单。总的来说，动态菜单的加载和渲染涉及到了前后端数据交互、状态管理以及路由守卫的灵活使用。

关于更深入的学习，可以参考慕课网的相关文章，如前端Web开发入门书籍、常用工具软件介绍、前端开发者技能要求以及React与尤雨溪的讨论。