若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)

news2025/1/23 5:37:45

我们经常会有这样需求,当我们在一个页面时,想要跳转到另一个页面,但是跳转的同时还需要携带参数。那么这种情况在若依系统中该如何做呢,下面我们来说一下。

文章目录

    • 问题提出:
    • 一、创建目标页面的路由(也就是图2的路由)
    • 二、给按钮编写路由跳转方法,并携带参数
    • 三、在目标页面中拿到路由的参数并在页面进行展示
    • 四、注意事项 :

问题提出:

我这里有个学生成绩展示的表格(如图1),当我单击查看详情时我想要跳转到另一个页面进行学生成绩的展示(如图2)。
在这里插入图片描述

图1

在这里插入图片描述

图2

一、创建目标页面的路由(也就是图2的路由)

1.1 首先找到前端src/router文件夹下的index.js页面

在这里插入图片描述
1.2 进入后在公共路由下,仿照上面路由的写法,新建一个目标页面的路由

如下图所示,我们新建了一个路由,路由的完整路由为,/student/studentScore
我们在新建一个路由后,就只需要修改如下这几个框出来的地方即可。
在这里插入图片描述

  {
    path: '/recipeAdvice',
    component: Layout,
    hidden: true,
    redirect: 'recipeAdvice',
    children: [
      {
        path: 'recipeAdviceCard',
        component: () => import('@/views/soil/recipeAdvice/index'),
        name: 'recipeAdviceCard',
        meta: { title: '配方建议填写' }
      }
    ]
  }

了解内容:

  {
    path: '/recipeAdvice',
    component: Layout,
    hidden: true,
    redirect: 'recipeAdvice',
    children: [
      {
        path: 'recipeAdviceCard',
        component: () => import('@/views/soil/recipeAdvice/index'),
        name: 'recipeAdviceCard',
        meta: { title: '建议卡填写' }
      }
    ]
  }

对这个路由内容的解析:
这是一个 Vue.js 的路由配置,它定义了一个 URL 路径 /recipeAdvice 对应的组件和子路由。下面是具体的解析:

  1. path: '/recipeAdvice':定义了主路由的路径为 ‘/recipeAdvice’。

  2. component: Layout:表示该路由对应的主组件是 Layout

  3. hidden: true:表示该路由在侧边栏导航或者面包屑中不会被显示。

  4. redirect: 'recipeAdvice':表示访问 ‘/recipeAdvice’ 时会自动重定向到 ‘recipeAdvice’。

  5. children: [...]:定义了子路由的数组。

    • 子路由的 path: 'recipeAdviceCard':定义了子路由的路径为 ‘recipeAdviceCard’,所以完整的访问路径为 ‘/recipeAdvice/recipeAdviceCard’。

    • component: () => import('@/views/soil/recipeAdvice/index'):表示该子路由对应的组件是动态导入的,路径为 ‘@/views/soil/recipeAdvice/index’,这种方式可以实现路由组件的懒加载,即当路由被访问的时候才加载对应的组件,可以提高应用的启动速度。

    • name: 'recipeAdviceCard':定义了路由的名称,可以在 <router-link :to="{ name: 'recipeAdviceCard' }"> 这样的语法中使用。

    • meta: { title: '配方建议填写' }:定义了路由的元信息,这里设置了 title 属性为 ‘配方建议填写’,可以在导航守卫等地方获取并使用这个属性值。

总的来说,这段路由配置定义了一个 URL 路径为 ‘/recipeAdvice/recipeAdviceCard’ 的路由,当用户访问这个 URL 时,会加载并显示 ‘@/views/soil/recipeAdvice/index’ 这个组件,同时在面包屑或者侧边栏导航中不会显示这个路由。


二、给按钮编写路由跳转方法,并携带参数

跳转时使用this.$router.push来进行跳转,里面有path、query两个参数

path:就是刚刚配置的路由的完整路径,/student/studentScore 写到这里即可
query:就是要携带的参数,这里我传递了两个参数,一个id,一个成绩对象

注意:这里传递对象的话最好是转成json,否则的话那边接收就不太好处理,所以这里使用JSON.stringify方法将根据id查询出来的成绩对象给转成了json

这个是完整的查看详情按钮的写法:
在这里插入图片描述

this.$router.push({
          path:'/student/studentScore',
          query:{
            id:row.id,
            form:JSON.stringify(this.form)
          }
        })

三、在目标页面中拿到路由的参数并在页面进行展示

在目标页面中,我们直接在created中处理传递过来的路由参数,我们这里在拿参数值的时候使用this.$route.query.参数名(如图3.1所示)。
判断参数是否存在,如果存在就赋值给我们自己创建的对象,然后再将对象绑定到表单上即可,然后就完成了跳转自动回显(如图3.3所示)。

注意,这里query.获取的是传递时的参数名称(如图3.1所示,这是我们在路由跳转页面定义的参数名称)
在这里插入图片描述

图 3.1

在这里插入图片描述

图 3.2
    created() {
      //如果路由参数存在
      if (this.$route.query.id && this.$route.query.form) {
        this.studentId = this.$route.query.id;
        this.areaObj = JSON.parse(this.$route.query.form);
        console.log(this.studentId,"studentId-------------")
        console.log(this.areaObj,"areaObj-------------")
      }
      if (this.areaObj) {
        this.from2=this.areaObj;

      }
    },

在这里插入图片描述

图 3.3

四、注意事项 :

1、这里必须把配置写到公共路由的下面
2、如果路由没有成功跳转,检查component的路径是否配置正确以及调用时路径是否书写正确
3、如果上面都没有问题,可以重启前端项目试一下
4、传递对象参数时建议转成json,这样处理起来也比较方便

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

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

相关文章

C语言--有3个候选人,每个选民只能投票选一人,要求编一个统计选票的程序,先后输入被选人的名字,最后输出各人得票结果。

一.解体思路 设一个结构体数组&#xff0c;数组中包含3个元素; 每个元素中的信息应包括候选人的姓名和得票数;输入被选人的姓名&#xff0c;然后与数组元素中的“姓名”成员比较&#xff0c;如果相同&#xff0c;就给这个元素中的“得票数”成 员的值加1;输出所有元素的信息。 …

win下安卓打包指南

win下安卓打包指南 0、缘起 换了台电脑竟然忘了怎么打包&#xff0c;还好有笔记&#xff0c;用软件打包也挺好&#xff0c;但是我感觉用 命令行 更有操作感&#xff0c;分享下。 1、下载并配置apktool&#xff08;放在C://Windows无需配置环境变量&#xff0c;需要java环境&…

【算法练习Day45】最长公共子序列不相交的线最大子数组和

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 最长公共子序列不相交的线最…

Linux输入与输出设备的管理

计算机系统中CPU 并不直接和设备打交道&#xff0c;它们中间有一个叫作设备控制器&#xff08;Device Control Unit&#xff09;的组件&#xff0c;例如硬盘有磁盘控制器、USB 有 USB 控制器、显示器有视频控制器等。这些控制器就像代理商一样&#xff0c;它们知道如何应对硬盘…

如何在 Windows 11 上恢复丢失的文件?(4种方法)

在 Windows 11 设备上丢失重要文件感觉就像一场噩梦。这是您希望时光倒流并撤消意外删除或避免那些意外的系统故障的时刻之一。这种情况带来的挫败感和焦虑感简直难以承受。但是&#xff0c;嘿&#xff0c;不要绝望&#xff01;我们随时为您提供帮助。 在这本真诚的指南中&…

CA 陪你看 Ignite | 聚焦 Microsoft Ignite 2023

点击蓝字 关注我们 编辑&#xff1a;Alan Wang 排版&#xff1a;Rani Sun 微软 Reactor 为帮助广开发者&#xff0c;技术爱好者&#xff0c;更好的学习 .NET Core, C#, Python&#xff0c;数据科学&#xff0c;机器学习&#xff0c;AI&#xff0c;区块链, IoT 等技术&#xff0…

android studio 修改图标

Android Studio 修改图标 简介 Android Studio 是一款由谷歌推出的用于开发 Android 应用程序的集成开发环境&#xff08;IDE&#xff09;。在开发过程中&#xff0c;我们可以根据自己的需求修改 Android Studio 的图标&#xff0c;以个性化我们的开发环境。 本文将介绍如何在…

XC1010非隔离型、低成本的PWM功率开关、AC-DC 220V转5V 200mA小电流芯片

XC1010是一款非隔离型、高集成度且低成本的PWM功率开关&#xff0c;适用于降压型和升降压型电路。 XC1010采用高压单晶圆工艺&#xff0c;在同一片晶圆上集成有 500V 高压 MOSFET 和采用开关式峰值电流模式控制的控制器。在全电压输入的范围内可以保证高精度的 5V 默认…

LoRAShear:微软在LLM修剪和知识恢复方面的最新研究

LoRAShear是微软为优化语言模型模型(llm)和保存知识而开发的一种新方法。它可以进行结构性修剪&#xff0c;减少计算需求并提高效率。 LHSPG技术&#xff08; Lora Half-Space Projected Gradient&#xff09;支持渐进式结构化剪枝和动态知识恢复。可以通过依赖图分析和稀疏度…

【3】Gradle-快速入门使用【Gradle概念】

目录 【3】Gradle-快速入门使用【Gradle概念】Gradle任务查看可用任务了解任务探索任务依赖性 依赖关系了解传递依赖关系查看项目依赖项添加版本目录 【可选】 插件使用插件查看插件提供的任务配置插件 增量构建启用缓存使用构建缓存步骤总结 个人主页: 【⭐️个人主页】 需要您…

【tg】 5 :线程切换

manager 可以切到 其他类的其他线程去执行。线程切换 先通过 networkmgr 线程 执行 ,但是传递了Manager 自己的线程 进去。在networkmgr 的network线程中,获取到stats数据,然后扔给 manager的线程thread ,去posttask 还行这个task里调用了mediamanager 的perform ,在media…

研究方法——案例研究设计与方法

作者&#xff1a;罗伯特K.殷 &#xff08;一&#xff09;计划&#xff1a;如何把握何处、何时用案例研究方法 1.问题&#xff1a; 按照作者的观点&#xff0c;案例研究1984年之后才逐渐得到重视&#xff0c;可是在数据信息有效收集的时代&#xff0c;几乎所有的经典都是以案例…

[西湖论剑 2022]real_ez_node

文章目录 前置知识EJS模板注入&#xff08;CVE-2022-29078&#xff09;原型链污染漏洞 &#xff08;CVE-2021-25928&#xff09;HTTP响应拆分攻击&#xff08;CRLF&#xff09; 解题过程代码审计构造payload 前置知识 EJS模板注入&#xff08;CVE-2022-29078&#xff09; EJS…

LeetCode18-四数之和

注意!其中nums数值的范围,四个加一起会导致INT溢出,long类型则是64位的整数,因此不会导致溢出,这也是本题难点之一! 大佬解法(拿捏offer的解法) 经过反复的代码比对和Debug,发现大佬解法的速度之快体现在足足7个if语句的剪枝,其中包括了2个关键性的去重的if语句以及2个关键性…

openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-144) - 验证

文章目录 openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-144) - 验证概述笔记重复数字IO的问题想法手工实现程序实现确定要摘掉的数字重合线自动化测试的问题测试程序的场景测试程序的运行效果测试程序实现备注END openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-14…

推荐这款机器学习的特征筛选神器!

大家好&#xff0c;特征选择是机器学习建模流程中最重要的步骤之一&#xff0c;特征选择的好坏直接决定着模型效果的上限&#xff0c;好的特征组合甚至比模型算法更重要。除了模型效果外&#xff0c;特征选择还有以下几点好处&#xff1a; 提高模型性能并降低复杂性&#xff08…

Spring Cloud学习(六)【统一网关 Gateway】

文章目录 网关的功能搭建网关服务路由断言工厂Route Predicate Factory路由过滤器 GatewayFilter过滤器执行顺序跨域问题处理 网关的功能 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 在SpringCloud中网关的实现包括两种&#xff1a; gatewayzuul …

到底是什么是Python?语言的核心是什么?

文章目录 前言一、为什么提出python编程的核心是什么&#xff1f;二、Python需要REPL&#xff1f;三、Python的哪些部分需要被视为“Python”&#xff1f;四、需要多少兼容性才能有用&#xff1f;Python技术资源分享1、Python所有方向的学习路线2、学习软件3、精品书籍4、入门学…

计算机网络技术

深入浅出计算机网络 微课视频_哔哩哔哩_bilibili 第一章概述 1.1 信息时代的计算机网络 1. 计算机网络各类应用 2. 计算机网络带来的负面问题 3. 我国互联网发展情况 1.2 因特网概述 1. 网络、互连网&#xff08;互联网&#xff09;与因特网的区别与关系 如图所示&#xff0…

Windows11跳过联网激活 跳过登陆操作

1 背景 笔者使用VirtualBox时安装Win11&#xff0c;初始化的配置提示需要注册账户才能进行下一步操作&#xff0c;于是去查了一下发现有办法绕过&#xff0c;方法就是断网oobe\ByPassNRO.cmd&#xff0c;试了一下发现可以&#xff0c;便有了这篇文章。 2 流程 开机之前&…