Vue3 中如何加载动态菜单？

文章摘要

松哥正在录制TienChin项目视频，介绍如何使用Spring Boot和Vue3技术栈来实现动态菜单渲染。他之前分享了关于TienChin项目中菜单数据问题的文章，讲述后端如何动态生成菜单JSON。现在的挑战是如何在前端正确渲染这些菜单。

1. 整体思路

实现动态菜单的整体思路与vhr项目相同，即将菜单数据存入vuex中。为了在页面跳转时判断数据是否存在，使用vue的路由导航守卫功能。如果vuex中的菜单数据不存在，表明用户进行了页面刷新，需要重新从服务端加载菜单数据。

2. 实现细节

2.1 加载细节

在src/permission.js文件中，通过前置导航守卫加载路由。该守卫首先检查用户是否登录，如果未登录则根据访问地址是否在免登录白名单中决定是否重定向到登录页面。若登录，则进一步判断vuex中的roles是否存在，不存在则表示页面刷新，需要调用getInfo和generateRoutes方法从服务端加载用户信息和路由信息。

2.2 getInfo

getInfo方法负责从服务端加载用户信息并存入vuex。如果浏览器刷新，数据将会丢失。

2.3 generateRoutes

generateRoutes方法向后端请求路由数据，并处理返回的数据，生成可用的路由表。此方法区分了控制台固定菜单和根据用户权限动态生成的菜单。

3. 小结

文章总结了RuoYi-Vue3中动态菜单渲染逻辑的核心内容，包括整体思路和实现细节。更多信息和视频教程可以通过点击项目配套视频链接获取。