基于vue-router的从后端动态加载菜单的实现

基于Vue路由器的动态加载菜单实现来自后端源下载前言VUE路由器的后端模拟加载菜单实现示例。JAVA应用程序。YML验证结果前端示例编写axios工具编写应用程序接口编写测试页1.vue2.vue3.vue转换应用程序。vue实现动态加载路由验证动态路由

源代码下载

你可以直接在微信上扫描二维码来关注我的公开号码,然后回复。源代码的下载地址将被给出,相应的视频教程将被附上,相关的技术文章将定期与你分享。

前言

在前端和后端分离架构的开发过程中,我们有两种方法来管理我们的路由。最常见的方法是将配置直接写入前端代码。这种方式写起来非常方便。然而,当我们需要做一些动态菜单的时候,我们不能实现[例如动态配置相关的报告页面。也许有人会说我们的报告都是定制的,那么您可以使用第一种实现方法]。此时,我们需要使用我们的另一种路由实现方法,即从后端直接读取当前用户的路由信息,以便动态加载前端。

后端模拟加载菜单示例实现

后端。我们直接使用intellij创建一个春季启动项目。配置[VueRouterController.java]路由请求控制器[CorsConfig.java]来释放跨域请求和最后一个应用程序是非常简单的。

VueRouterController.java

CorsConfig.java

应用程序. yml

验证结果

我们直接运行当前项目。然后我们使用我们的邮差工具直接访问: . 0 . 0 . 1:8989/MENU/LOAD MENU。我们将看到下面的页面来显示我们的后端项目已经完成:

前端示例的实现

首先我们需要创建一个基于vue的前端项目。如果您不知道如何创建前端项目,可以直接点击春季启动的前端项目的[CMD版本]查看前端和后端分离架构来创建前端项目。创建过程如下:

创建完成后,我们可以直接使用我们的开发工具打开我们的前端项目,然后修改我们的package.json文件。修改完成后,代码如下:

然后我们在前端项目的包. json目录中执行以下命令:

编写axios工具

与后端建筑交互。我们直接使用axios,并在前端项目的src目录下创建一个lib目录。同时,如下创建我们的通信包JS [Axios.js]代码:

下一步,将[api.request.js]代码打包如下:

最后,将接口调用通用工具[base.js]代码编写如下:

编写api接口

在src目录下创建一个api/sys/menu目录。然后创建一个api.menu.js代码如下:

写测试页

然后我们需要在src下创建一个iview文件夹并同时写三个测试页,即1.vue、2.vue和3.vue。代码如下:

1 . vue

2 . vue

3 . vue

refuge app . vue实现动态负载路由

验证动态路由

最后我们需要验证我们的动态路由是否正常,启动我们的后端项目和前端项目,然后我们直接输入以下内容我们将看到下一页,显示我们的动态路由已经完成。

-