【RuoYi】实现二级页面跳转

news2024/11/25 5:01:28

一、前言

    在我们写项目的时候,很多时候都会用到二级页面的跳转,RuoYi框架中也不例外,RuoYi虽然前端用的是vue,但是因为其有权限设置,在实现二级页面跳转的时候和普通的页面跳转有所区别,博主这里进行记录,方便后期的后顾,也希望能对屏幕前的小伙伴们有所帮助。

二、实现过程

假设我们已经有了一张student表的CRUD操作,如图所示:

bbc1c9c4d71f4437ba803df9be4b8ae2.png

现在,我们要实现通过点击”按钮“实现页面的跳转操作,让我们来看看在RuoYi中如何操作。

①创建跳转页面

86692484eb2b4047961c8c3c57ab145b.png

跳转页面的内容根据自己的需求设定,我这里是做测试就做个简单的内容,只要页面能跳过去就行。

104afebdc5d9483685202ea7febfe925.png

②配置路由

d1af314037474a4eaa9c1407d0e548f8.png

配置跳转到familyDetail页面的路由,如下所示

da970250767049b1b9f6a99cd083abbe.png

③跳转方法

3f68f872c9e44ea297febab94f9b9728.png

方法跳转如下:

995d6b64341c4abfaa2561f2eb9a1423.png

④效果

09e97217f6d84d01acdd1b5bfff01d73.png

e6abb1071c5f44bea5c065a3f13dcedd.png

三、总结

     虽然,我这里使用的案例比较简单,但是在RuoYi中二级页面的跳转是使用非常频繁的。其实就像上述的案例所示,当跳转到”familyDetail“页面后,还可以通过

this.$route.params.参数名称

获取传递到”familyDetail“页面的参数,此时就可以根据我们自己的需求来完成一些数据的查询、显示等操作。

    好啦!这篇博客就到这里了,如果有所帮助,别忘了,点赞、关注支持一波博主哦~

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1718142.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于朴素贝叶斯算法的新闻类型预测,django框架开发,前端bootstrap,有爬虫有数据库

背景 在当今信息爆炸的时代,新闻内容的分类和预测对于用户个性化推荐和信息检索至关重要。基于朴素贝叶斯算法的新闻类型预测系统结合了机器学习和自然语言处理技术,能够根据新闻内容自动进行分类,提高新闻处理效率和准确性。采用Django框架…

LeetCode-47 全排列Ⅱ

LeetCode-47 全排列Ⅱ 题目描述解题思路代码说明 题目描述 给定一个可包含重复数字的序列 nums ,按任意顺序 返回所有不重复的全排列。 示例 : 输入:nums [1,1,2]输出: [[1,1,2], [1,2,1], [2,1,1]] b站题目解读讲的不好&…

【机器学习】Transformer模型大小与性能探究

Transformer模型大小与性能:不仅仅是尺寸的问题 一、Transformer模型的挑战二、经验标度定律的局限性三、记忆过程与性能动态五、结论与展望 在人工智能和机器学习的领域里,模型的大小与性能之间的关系一直是研究人员关注的焦点。然而,最近的…

CUDA学习(2)

什么是CUDA CUDA(Compute Unified Device Architecture),统一计算设备架构,英伟达推出的基于其GPU的通用高性能计算平台和编程模型。 借助CUDA,开发者可以充分利用英伟达GPU的强大计算能力加速各种计算任务。 软件生…

下载安装node.js,查看node.js版本

目录 一、下载安装node.js 二、查看node.js版本 三、使用nvm管理node.js版本 一、下载安装node.js 文档 nodejs中文网•学习教程•入门•如何安装 Nodejshttps://nodejs.cn/en/learn/getting-started/how-to-install-nodejs 步骤 1.进入node.js官网 nodejshttps://nodejs.…

解决:写路由文件时引入页面路径没有提示

1、首先安装插件: Path Autocomplete 2、配置settings.json 文件 复制下面代码到settings.json配置文件中: "path-autocomplete.pathMappings": {"": "${folder}/src/","views": "${folder}/src/views/&…

Python考试复习---day5

1.打印商品名 ainput().split() print("商品列表:") for i,name in enumerate(a):print("{}\t{}".format(i,name))enumerate----枚举--利用它可以同时获得索引和值 enumerate多用于在for循环中得到计数 例如: list1 ["这&qu…

centos7_VNC_install

文章目录 1. overview2, 开始安装3. VNC调试参考4. 常见错误 1. overview VNC,全称为Virtual Network Computing,它是一个桌面共享系统。它的功能,类似于windows中的远程桌面功能。VNC使用了RFB(Remote FrameBuffer,远程帧缓冲&a…

[数据集][目标检测]猫狗检测数据集VOC+YOLO格式8291张2类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):8291 标注数量(xml文件个数):8291 标注数量(txt文件个数):8291 标注…

装饰画行业要怎么做

在当今社会,随着人们生活水平的提高和审美需求的多样化,装饰画行业迎来了新的发展机遇。面对激烈的市场竞争和消费者日益挑剔的眼光,装饰画行业需要不断创新,以适应市场的变化和满足消费者的个性化需求。 装饰画行业要紧跟时代潮流…

【深度学习】安全帽检测,目标检测,yolov10算法,yolov10训练

文章目录 一、数据集二、yolov10介绍三、数据voc转换为yolo四、训练五、验证六、数据、模型、训练后的所有文件 寻求帮助请看这里: https://docs.qq.com/sheet/DUEdqZ2lmbmR6UVdU?tabBB08J2一、数据集 安全帽佩戴检测 数据集:https://github.com/njvi…

【力扣】LCR 130. 衣橱整理

一、题目描述 二、算法思路 这是⼀道非常典型的「搜索」类问题。 我们可以通过「深搜」或者「宽搜」,从 [0, 0] 点出发,按照题目的要求(选择 向右移动一格 或 向下移动一格,但不能移动到衣柜之外 )一直往 [m - 1, …

免费的VMware ?就是它了!【送源码】

在 Docker 没有出来之前,很多项目的的部署方案是使用虚拟机,在一台服务器上创建好几个虚机出来,配置一下网络,就可以把一台服务器当做多个服务器用了。 而作为开发者来说,我们经常碰到需要使用不同操作系统的需求&…

汇编:x86汇编环境搭建与基础框架(32位)

32位汇编代码编写环境:Visual Studio(笔者用的版本为2017);先来说一下在Visual Studio 2017中编写汇编代码的准备操作: ①创建空项目 ②设置项目属性:平台工具集设置为Visual Studio 2015(v140)&#xff0…

初识Spring Cloud Gateway

文章目录 一、网关简介1.1 网关提出的背景1.2 网关在微服务中的位置1.3 网关的技术选型1.4 补充 二、Spring Cloud Gateway的简介2.1 核心概念:路由(Route)2.2 核心概念:断言(Predicate)2.3 核心概念&#…

【初阶数据结构】栈和队列(附题目)

目录 1.栈 1.1栈的概念及结构 1.2栈的实现 1.2.2实现结构的选择 a.数组 b.链表 c.更优的选择 1.2.3实现结构 a.栈的结构体 b.栈的初始化 c.栈的销毁 d.入栈 e.出栈 f.获取栈顶元素 g.获取栈中有效元素个数 h.检测队列是否为空,如果为空返回非零结…

BioVendor—sHLA-G ELISA试剂盒

人类白细胞抗原-G (HLA-G)与其他MHC类基因的不同之处在于它的低多态性和产生七种HLA-G蛋白的选择性剪接,这些蛋白的组织分布局限于正常的胎儿和成人组织,这些组织对先天和后天免疫细胞都具有耐受性。可溶性HLA-G是一种免疫抑制分子,诱导活化的…

掌握这三点软文营销秘诀,快速实现品牌用户增长

在信息爆炸的时代,品牌用户如何快速实现增长已成为每个企业发展的必经之虑。而软文营销,作为品牌推广中不可或缺的一环,也正逐渐受到越来越多企业的青睐。它与传统的硬广告相比,不会直接的进行产品销售,软文更注重与读…

[初始计算机]——计算机网络的基本概念和发展史及OSI参考模型

🏡作者主页:点击! 🤖网络通信基础TCP/IP专栏:点击! ⏰️创作时间:2024年5月30日11点59分 🀄️文章质量:96分 ​ 目录 🌐计算机网络概述 💯…

星鸾云平台:高效配置Anaconda环境

星鸾云平台:高效配置Anaconda环境 多种算力资源和AI一体机在星鸾云平台上安装Anaconda并配置Python环境的步骤注册和登录体验GPU显卡服务选择服务器实例登陆GPU实例挂载数据盘配置CUDA环境安装Anaconda 星鸾云平台的优势 星鸾云平台以其卓越的产品功能和优势&#x…