若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决

Posted 2023-04-03 qq_18154987

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决相关的知识，希望对你有一定的参考价值。

若依前后端分离新窗口打开页面this.$router.resolve

欢迎遇到同样问题的同学阅读

例如系统后台要求点击【可视化大屏】菜单，需要打开新窗口显示，但不能影响原窗口显示系统页面，网上查询了一圈都是比较片面的只提到了this.$router.resolve，没有具体详细的步骤，由于个人对vue的精髓掌握的不深，所以在此记录一下！

1.菜单配置

首先我们在若依搭建起来的平台里可以手动通过平台生成菜单，并修改配置菜单的路由，组件路径，图标……参数，如图所示：
这里很多同学应该不陌生，点击修改对应需要新窗口打开的菜单，如下图所示：

【路由地址】需要和Sidebar里的index.vue菜单里条件判断做匹配的；
【组件路径】需要在router里index.js进行配置。

2.Sidebar添加新窗口打开的条件判断

直接上图说明，如图：

很多人不知道哪里找到这个Sidebar里代码应该加的位置，这下看明白了吧！
注意if条件判断里path的值，和上一步菜单配置里的路由地址是一样的。
代码片.

 //   可视化大屏新窗口跳转
      if (path == "/cloudPlat/staticCloudPlat") 
        let routeUrl = this.$router.resolve(
          path: "/indexplats",
        );
        //新窗口打开页面
        window.open(routeUrl.href, "_blank");
        //原窗口保持原来的页面
        this.$router.go(-1);
        return 0;

3.router里index.vue里进行自定义路由访问地址

直接上图说明，如图：

代码片.

  // 云平台可视化大屏，单页面新窗口打开
  
    path: '/indexplats',
    component: () => import('@/views/park/staticCloudPlat/indexplat'),
    hidden: true
  ,

如此按照以上3步，即可大功告成！
其实主要是对若依框架的依赖性太强，所以vue结合起来解决新窗口打开页面就很low，希望可以帮助更多同学！

Ruoyi-Vue若依前后端分离版代码生成

目录

一、新建数据表

流程：

1、新建查询

2、运行该查询，并创建成功

二、运行Ruoyi前后端，使用【代码生成】

流程

1、导入前面第一步新建的数据表

2、导入成功后，进行编辑

3、生成代码

4、运行sql文件

三、新建模块

流程

1、新建模块

2、配置新模块环境

四、将生成代码的文件复制到项目中

五、前端页面新建菜单，配置路径

流程

1、添加菜单

2、新增菜单

六、生成结束

本文主要讲解关于 Ruoyi-Vue若依前后端分离版基于代码生成的新建模块的添加。

一、新建数据表

注①：在原Ruoyi数据库的基础上进行新建

注②：若依建表有个要求：表字段 和表，都需要加注释，注释就是生成页面的显示内容

drop table if exists stu_student;

create table stu_student (
  student_id           int(11)         auto_increment    comment '编号',
  student_name         varchar(30)     default ''        comment '学生名称',
  student_age          int(3)          default null      comment '年龄',
  student_hobby        varchar(30)     default ''        comment '爱好（0代码 1音乐 2电影）',
  student_sex          char(1)         default '0'       comment '性别（0男 1女 2未知）',
  student_status       char(1)         default '0'       comment '状态（0正常 1停用）',
  student_birthday     datetime                          comment '生日',
  primary key (student_id)
) engine=innodb auto_increment=1 comment = '学生信息表';

流程：

1、新建查询

2、运行该查询，并创建成功

二、运行Ruoyi前后端，使用【代码生成】

【代码生成】模块路径：系统工具——代码生成

流程

1、导入前面第一步新建的数据表

2、导入成功后，进行编辑

【基本信息】填写

【字段信息】此处由数据库自动生成相关信息，在这里博主就不进行修改

【生成信息】

进行了三个步骤填写后，点击提交

3、生成代码

生成代码后，需要下载zip压缩包，进行解压

解压之后得到

4、运行sql文件

将解压的文件内的 .sql 文件运行于原若依数据库

所运行的代码是生成在sys_menu数据表中

运行成功后，在sys_menu表中会有相关数据表的数据

三、新建模块

新建模块后，配置新模块环境

流程

1、新建模块

2、配置新模块环境

①在..\\RuoYi-Vue-master\\pom.xml路径下的pom.xml 引入刚新建的模块

<!-- 学生信息模块-->
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-student</artifactId>
<version>$ruoyi.version</version>
</dependency>

②需要在ruoyi-admin这个模块的pom.xml中引入刚刚新建的模块（需要重新加载一下maven）

此处引入的代码，与上一步一样的

<!-- 学生信息模块-->
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-student</artifactId>
<version>$ruoyi.version</version>
</dependency>

③由于自动生成的代码会用到ruoyi-common中的内容，我们需要将ruoyi-common引入到我们新建的模块中：（不做这个后面代码会报错，也会自动引入）

注：此处引入的代码与上两步不同

    <!-- 通用工具-->
    <dependencies>
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>
    </dependencies>