Song Brother Song在Tienchin Project中分享了菜单数据问题之前写了两篇文章。对于那些没有看过它的朋友，请在这里戳：
这两篇文章主要向您解释了如何根据当前登录用户进行登录，并动态生成菜单JSON。
因此，问题在于，在接收菜单JSON从后端返回后，我们该如何渲染？这是我们当前面临的问题。
Tienchin项目是根据Ruoyi脚手架完成的，因此您还可以在本文的本分析中查看该项目的分析。
首先，让我们整理总体实施思想，首先：整体思维与VHR完全相同。
考虑到一些朋友可能已经忘记了中间VHR的前端动态菜单的实现，因此本文与您分析。
为了确保在所有文件中，可以访问菜单数据，因此请将菜单数据选择为VUEX。Vuex是Vue的公共场所。所有文件都可以从中读取。存储在内存中的数据，因此具有一个功能，即在浏览器被F5刷新后，数据就消失了。因此，当页面跳跃时，我们应该将其区分。用户单击页面上的菜单按钮后，页面跳转或用户单击浏览器刷新按钮（或按下F5）并跳跃。
为了实现这一目标，我们需要在VUE中使用路由导航护罩功能。对于我们的Java工程师来说，这些听起来可能有些奇怪，但是您可以将其理解为Java中的过滤器。实际上，为什么我们在视频中向朋友解释，这是一个类比。在我们的脑海中，很容易理解一件新事物。
VUE中的导航卫队类似于监视器。它可以监视所有页面跳跃。在页面跳跃中，我们可以判断Vuex中的菜单数据是否仍然存在。如果仍然存在，则意味着用户正在单击页面上的单击菜单按钮，可以完成跳跃。如果不存在，则意味着用户单击浏览器的刷新按钮，或按F5刷新页面。目前，我们必须快速将菜单数据加载到服务器。
--- xxxxxxxxxxxxxxxxxxx---
想法的总体实施就是这样。接下来，让我们看看一些特定的实现详细信息。
首先，让我们看一下加载的细节。
小朋友知道，单页项目的入口是路由加载的内容在src/clerdmission.js文件中，并且该文件在main.js中介绍。
让我看一下这位前导航卫队的想法：
这是动态路由的总体思考。
在第三步中，涉及两种方法，一种是getInfo和一个生成器。这两种方法也很关键。让我们看一点。
首先，加载用户信息的方法位于文件中。换句话说，在加载了这些用户的基本信息之后，将其存储在Vuex中。如果浏览器的数据刷新，这些数据将丢失：
该方法的逻辑实际上是什么可说的。结合服务器返回的JSON格式，应该对其进行充分理解（JSON的一部分）：
此外，在VHR下，我们将请求封装到API.JS文件中。有常用的获取，发布，放置，删除请求等，然后直接调用这些方法发送这些方法以发送这些方法直接发送它们。提前，并且在需要时直接调用封装的方法。
生成器方法位于src/store/store/模块/允许的文件中。这里还有更多的地方讨论：
首先，每个人都可以看到服务器返回的数据已经分析了三次并获得了三个对象。这三个对象将来都使用，但是使用的场景是不同的。
路线：
由ConstantRoutes返回的动态路由数据和服务器保存在路由中，并且此动态路由数据中的路径已重写，因此该路由主要用于两个位置：
Sidebarrouters：
这是每个人都熟悉的侧栏菜单。特定显示是由ConstantRoutes+服务器返回的菜单。但是，这些构成基本上是隐藏的属性是错误的，并且在渲染时不会呈现它们。
TopBarrouters：
这在TopNAV组件中使用。
第一个级别的菜单显示在顶部，左侧的左侧是次级和第三级菜单，因此顶部菜单的渲染使用此topbarrouters。
DefaultRoutes：
如果要打开顶部菜单，则需要在src/layout/组件/设置/index.vue组件中设置，如下所示：图：
打开顶部菜单后，单击顶部菜单，将切换左菜单栏。目前，相关菜单设置为从defaultretes的Sidebarrouters设置。
好吧，这是这四个途径变量的作用。老实说，脚手架中该作品的代码设计有些混乱。无需参与这么多变量。当Song Brother花时间优化时。
Generoutes方法最终将将重写变量返回到前面提到的前导航罩中，最后，前导航罩将数据添加到路由器中。
菜单的渲染以src/layout/组件/sizebar/index.vue完成。阅读后是常规操作。没什么可说的。
好吧，这是Ruoyi-Vue3中的动态菜单渲染逻辑。我想知道朋友是否理解它？视频即将可用。对于对视频感兴趣的朋友，请在这里戳：Tienchin项目正在支持视频。
原始：https：//juejin.cn/post/71222942302470174