vue3+ts+vite--路由跳转,params传参好像丢失了?

前言

相信大家一定写过后台管理系统,有一个很普遍的功能,就是点击编辑,根据id,跳转到相对应的编辑页面,id是通过路由params传递过去了,但是还有一个需求是要将父组件的名称也传递过去 ,过程特别顺利,一顿操作猛如虎,一看打印undefined!!!请看:  

这是需要点击编辑的父组件:

这是接收参数的子组件:

  • vue3取消了2.0部分api,所以路由跳转传值方式有所不同。
  • 当然有取消,肯定新增也是有的,所以vue3.0新增的API如下:
  1. useRoute
  2. useRouter
  • 使用方法如下:

(1):在父组件引入useRouter,并且定义变量接收一下useRouter:

import { useRouter } from 'vue-router';

const router = useRouter();

(2):路由跳转

//单纯的跳转路由 
router.push('msg');

 
//对象形式
router.push({path:'msg'});


//命名路由,我的命名路由是Msg;id和passVlue是自定义传参的名称,input.value是input要输入的内容
router.push({ name:'EditItem',params: { id: passEditIds.value, passName:  editProgramName }});


所以根据视频操作,我的功能完全代码如下:

20241018-141939

(1):想要根据id跳转,就得配置路由,所以在router.ts组件配置:

//引入要跳转的编辑组件,下面是我自己的路径
import editProgramCom from '../views/screenAdvertising/programEditDialog/editProgramCom.vue'


 
// program -- 跳转编辑组件
  {
    path: `/editProgramCom/:id`,
    name: 'EditItem',
    component: editProgramCom,
    props: true
     // 确保传递 params 作为 props  
  }

(2):父组件,通过命名路由跳转携带id:



// 编辑
const editProgramItem = (editProgramId: number, editProgramName: string) => {
    // console.log(editProgramName)
    // const url = `/programEditDialog/editProgramCom/`
    passEditIds.value = String(editProgramId)
    passEditName.value = editProgramName
    router.push({ name: 'EditItem', params: { id: passEditIds.value, passName:  editProgramName } });
}

(2.1):说明:事件括号里面的参数都是通过插槽scope.row获取的,如果想获取id就是scope.row.id,如果是name就是scope.row.name,当然我的数据结构是这样,具体一定要打印数据结构再取值,代码:

<el-table-column prop="operation" label="操作">
                            <template #default="scope">
                                <el-button size="small"
                                    @click="editProgramItem(scope.row.id, scope.row.name)">编辑</el-button>
                                <el-button size="small" @click="eazyEditProgram(scope.row)">简单编辑</el-button>
                                <el-button size="small" @click="delProgramItem(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>

现在就要点击编辑然后跳转了,然后就是undefined:

20241018-145120

打印了好多次还是undefined,突然就想到了params参数会丢失,那么params和query可不可以一起用呢?可以的!修改后的代码如下:

// 编辑
const editProgramItem = (editProgramId: number, editProgramName: string) => {
    // console.log(editProgramName)
    // const url = `/programEditDialog/editProgramCom/`
    passEditIds.value = String(editProgramId)
    passEditName.value = editProgramName
    router.push({ name: 'EditItem', params: { id: passEditIds.value, }, query: { passName: editProgramName } });
}

 子组件接收代码,引入API如下:

import { useRoute } from 'vue-router'


const route = useRoute()    


//接收,这里偷懒,没有用变量接收,只是给伙伴们看下用法
onMounted(() => {
    // passData()
    console.log(route.params.id,route.query.passName)
})

效果图-点击编辑,名称是自由飞翔:

 子组件:

结语:

到这里就结束了,大佬们多多指教 !

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从0到1封装一个image/pdf预览组件

iShot_2024-10-14_16.47.10 目录结构 content.vue <template><div class"no-content-block"><i class"iconfont icondocument large-file" /><div class"text-wrapper">{{ t(__ui__.siPreview.previewSupported) }}<…

Spring Cloud Sentinel配置

Spring Cloud Sentinel 文章目录 Spring Cloud Sentinel1. Sentinel Dashboard 启动2. Spring Cloud 客户端配置3. Sentinel Dashboard 限流配置流控模式直连关联链路 流控规则快速失败Warm Up排队等待 4. Sentinel Dashboard 熔断配置5. Sentinel Dashboard 热点配置 1. Senti…

MEMC功能详解

文章目录 MEMC的工作原理&#xff1a;优点&#xff1a;缺点&#xff1a;适用场景&#xff1a;1. Deblur&#xff08;去模糊&#xff09;2. Dejudder&#xff08;去抖动&#xff09;总结两者区别&#xff1a; MEMC&#xff08;Motion Estimation and Motion Compensation&#x…

打破“几何第五公设不可证明”的神话——黄氏平行定义使证明第五公设易如反掌

黄小宁 绿色图片中的直线平行的定义&#xff08;此定义可推广为相应的平面平行的定义&#xff09;使人能根据几何常识一下子证明第五公设从而表明“2000年都无人能解决的世界著名数学难题”其实是一个天大的笑话。

Linux 手撕线程池

前言 线程池 是 池化技术 中很典型的一个&#xff0c;它旨在高效的管理和复用线程资源&#xff01;在现在的计算机体系中&#xff0c;线程是执行任务&#xff08;调度&#xff09;的基本单位。然而&#xff0c;频繁的创建和销毁线程也会带来较大的开销&#xff0c;包括系统资源…

RISC-V笔记——Pipeline依赖

1. 前言 RISC-V的RVWMO模型主要包含了preserved program order、load value axiom、atomicity axiom、progress axiom和I/O Ordering。今天主要记录下preserved program order(保留程序顺序)中的Pipeline Dependencies(Pipeline依赖)。 2. Pipeline依赖 Pipeline依赖指的是&a…

ECCV‘24 | WTConv:小参数大感受野,基于小波变换的新型卷积

前言 近年来&#xff0c;人们尝试增加卷积神经网络&#xff08;CNN&#xff09;的卷积核大小&#xff0c;以模拟视觉Transformer&#xff08;ViTs&#xff09;自注意力模块的全局感受野。然而&#xff0c;这种方法很快就遇到了上限&#xff0c;并在实现全局感受野之前就达到了饱…

鸿蒙原生应用扬帆起航

就在2024年6月21日华为在开发者大会上发布了全新操作的系统HarmonyOS Next开发测试版&#xff0c;网友们把它称之为“称之为纯血鸿蒙”。因为在此之前鸿蒙系统底层式有两套基础架构的&#xff0c;一套是是Android的AOSP&#xff0c;一套是鸿蒙的Open Harmony&#xff0c;因为早…

一篇文章教你完成软件验收测试,项目结题不再难

在软件开发过程中&#xff0c;验收测试是项目结题前的最后一道关卡。能否顺利通过验收测试&#xff0c;直接关系到项目的成功与否。 了解软件验收测试的重要性 软件验收测试是项目开发周期中的关键环节&#xff0c;其主要目的是检验软件是否满足用户需求、设计规范和合同要求…

C Primer Plus 第9章——第一篇

你该逆袭了 文章目录 一、复习函数1、定义带形式参数的函数2、声明带形式参数函数的原型3、使用 return 从函数中返回值&#xff08;1&#xff09;、返回值不仅可以赋给变量&#xff0c;也可以被用作表达式的一部分。&#xff08;2&#xff09;、返回值不一定是变量的值&#x…

机器视觉入门基础相关概念一 ——单目相机模型

机器视觉入门基础相关概念 相机模型 引言介绍&#xff1a;如果只是希望获取图像上的一些信息&#xff08;例如特征提取、拟合等&#xff09;&#xff0c;那么我们不会对三维空间中相机的位置有所要求。但如果希望通过二维的图像去理解三维空间中摄像机的信息&#xff0c;或者是…

简单三步完成 Telegram 生态的 Web3 冷启动

在竞争激烈的 Web3 领域&#xff0c;强有力的启动往往能决定成败。Telegram 无疑当下最火热的流量池&#xff0c;是很多 Web3 项目冷启动阶段的必选项。 但眼看着好多项目在 Telegram 生态火速获取百万级甚至千万级别的用户&#xff0c;自己的项目要怎么开始做增长&#xff0c;…

【记录】Django数据库的基础操作

数据库连接 在Django中使用 mysqlclient 这个包用于数据库的连接&#xff0c;切换至 Django环境中直接 pip install mysqlclient 安装此包 1 数据库连接配置 在项目目录下的setting.py中配置 DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: mini,#数据库名US…

nginx过滤模块怎么生效的

在nginx中&#xff0c;如果你要开发一个过滤模块&#xff0c;config中必须要加 HTTP_FILTER_MODULES$HTTP_FILTER_MODULES xxx 否则&#xff0c;即使在postconfiguration回调中加了ngx_http_top_header_filtermy_xxxx_filter_handle&#xff0c;最终my_xxxx_filter_handle也不…

PTA L1系列题解(C语言)(L1_081 -- L1_088)

L1-081 今天我要赢 题目内容&#xff1a; 2018 年我们曾经出过一题&#xff0c;是输出“2018 我们要赢”。今年是 2022 年&#xff0c;你要输出的句子变成了“我要赢&#xff01;就在今天&#xff01;”然后以比赛当天的日期落款。 输入格式&#xff1a; 本题没有输入。 输…

聊聊ASSERT处理在某些场景下的合理用法

先看看ASSERT的介绍&#xff1a; 编写代码时&#xff0c;我们总是会做出一些假设&#xff0c;ASSERT断言就是用于在代码中捕捉这些假设&#xff0c;可以将断言看作是异常处理的一种高级形式。断言表示为一些布尔表达式&#xff0c;程序员相信在程序中的某个特定点该表达式值为真…

数据结构编程实践20讲(Python版)—20并查集

本文目录 20 并查集&#xff08;Union-Find Set&#xff09;S1 说明并查集的定义并查集基本操作并查集优化并查集特点应用领域 S2 示例S3 问题1&#xff1a;朋友圈问题S4 问题2&#xff1a;网络连接恢复问题S5 问题3&#xff1a;随机生成迷宫 往期链接 01 数组02 链表03 栈04 …

【热门】用ChatGPT做智慧农业云平台——农业ERP管控系统

随着科技的进步,原有农业种植方式已经不能满足社会发展的需要,必须对传统的农业进行技术更新和改造。经过多年的实践,人们总结出一种新的种植方法——温室农业,即“用人工设施控制环境因素,使作物获得最适宜的生长条件,从而延长生产季节,获得最佳的产出”。这种农业生产方式…

vue3中监视 Reactive对象中的属性

watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组 一、框架&#xff1a; <template><div class"divBox"><h2>姓名&#xff1a;{{ person.…

2024年9月中国电子学会青少年软件编程(Python)等级考试试卷(一级)答案 + 解析

一、单选题 1、下列选项中关于 turtle.color(red) 语句的作用描述正确的是&#xff1f;&#xff08; &#xff09; A. 只设置画笔的颜色为红色 B. 只设置填充的颜色为红色 C. 设置画笔和填充的颜色为红色 D. 设置画笔的颜色为红色&#xff0c;设置画布背景的颜色为红色 正…