vue-路由跳转和路由传参!!!

news2024/10/5 20:18:04

需求:在修改商品时,会进行页面跳转,通过点击修改按钮进行页面跳转。这时我们需要将商品的id携带过去

一、首先我们在查询页面实现路由跳转并携带参数。

1.1、修改按钮

 <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>

1.2、先在List展示表格的页面导入useRouter

import { useRouter } from "vue-router";

1.3、声明router

const router = useRouter();

1.4、点击事件进行传参并跳转路由,

其中name是跳转页面的名字(你在router里的index.ts中路由配置的name)
query是要传递的参数,比如回显需要根据id查询对应的内容

//修改的点击事件 路由跳转
const edit = (scope: any) => {
  router.push({
    name: "category-edit",
    query: { id: scope.id, name: "category-edit" },
  });
};

1.5、 配置路由,通过router.push()中的name就是查找路由配置,然后实现跳转

 {
        path: "/category/edit",
        name: "category-edit",
        component: () => import("@/views/category/Edit.vue"),
        meta: { title: "分类编辑", icon: "Setting", isShow: false },
      },

二、编辑页面接收查询页面的参数

2.1、在跳转过来的Edit页面导入useRoute

import { useRoute } from "vue-router";

2.2、声明route 

const route = useRoute();

 2.3、使用参数 (通过route打点调用属性就可以)

route.query.id

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

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

相关文章

【排序】详解归并排序

一、思想 归并排序的核心思想是分治法&#xff0c;即将大问题分解成小问题来解决&#xff0c;然后再将解决后的小问题的结果合并以解决原来的大问题。具体包括以下几个步骤&#xff1a; 分解&#xff08;Divide&#xff09;&#xff1a;将原始数组不断地二分成更小的子数组&a…

黑马点评-优惠券秒杀业务

全局唯一ID 每个店铺都可以发布同类优惠券&#xff0c;当用户抢购时&#xff0c;就会生成订单并保存到tb_voucher_order这张表中&#xff0c;而订单表如果使用数据库自增ID就存在一些问题&#xff1a; 如果我们的id具有太明显的规则&#xff0c;用户或者说商业对手很容易猜测…

【教3妹学编程-算法题】超过阈值的最少操作数 II

2哥 : 叮铃铃&#xff0c;3妹&#xff0c;准备复工了啊&#xff0c;过年干嘛呢&#xff0c;是不是逛吃逛吃&#xff0c;有没有长胖呢。 3妹&#xff1a;切&#xff0c;不想上班&#xff0c;假期能不能重来一遍啊&#xff0c;虽然在家我妈张罗着要给我相亲呢。可是在家还是很好的…

基于springboot+vue的精简博客系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

数据结构中红黑树的概念以及代码

红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉搜索树&#xff0c;它在插入和删除节点时通过一系列的旋转和重新着色操作来保持平衡。红黑树的平衡性质使得它的查找、插入和删除操作的时间复杂度都能保持在 O(log n) 红黑树的定义如下&#xff1a; 每个节点要…

帝国CMS仿某猫办公PPT模板商城整站素材资源下载网站源码带手机端优化版

适合做创意设计模板下载的网站&#xff0c;涵盖行业优质精品PPT模板、视频素材、Word模板、Excel模板、音效及配乐素材等&#xff0c;集办公设计模板于一体&#xff0c;下载办公创意设计模板就选择这块源码&#xff01; 源码下载地址&#xff1a;帝国CMS仿某猫办公PPT模板商城…

基于laspy的点云数据存取及基于Open3D的点云数据可视化

一、基于laspy的点云数据存取 &#xff08;一&#xff09;激光雷达点云数据的LAS存储格式[1] LAS&#xff08;LASer&#xff09;格式是一种为激光雷达点云数据的交换和存档而设计的文件格式&#xff0c;是一种被American Society for Photogrammetry and Remote Sensing&#…

Claude 3正式发布,超越GPT-4,一口气读15万单词,OpenAI最强的大对手!

目录 多模态AI大模型Claude 3&#xff08;https://www.anthropic.com/news/claude-3-family&#xff09;Claude 3 的三个版本新增功能&#xff0c;chatgpt没有的使用成本总结 多模态AI大模型Claude 3&#xff08;https://www.anthropic.com/news/claude-3-family&#xff09; …

C# 中 TryParse 将字符串转换为特定类型的方法

在 C# 中&#xff0c;TryParse 是一个用于将字符串转换为特定类型的方法。它用于尝试解析字符串并将其转换为指定类型的值&#xff0c;而不会引发异常。如果解析成功&#xff0c;它将返回 true 并将解析结果存储在输出参数中&#xff1b;如果解析失败&#xff0c;它将返回 fals…

分析开源机器学习框架TensorFlow

TensorFlow是一个开源的机器学习框架&#xff0c;由Google开发和维护。它提供了一个灵活的编程环境&#xff0c;可用于构建和训练各种机器学习模型。TensorFlow的基本概念和使用场景如下&#xff1a; 张量&#xff08;Tensor&#xff09;&#xff1a;在TensorFlow中&#xff0c…

FairTune:优化参数高效微调以实现医学图像分析的公平性

paper&#xff1a;https://arxiv.org/abs/2310.05055 code&#xff1a; https://github.com/Raman1121/FairTune 摘要和介绍 人工智能在医疗健康应用中的应用正在迅速增长。然而&#xff0c;人工智能模型一再被证明对不同的人口统计学亚群体表现出不必要的偏见——AI模型在由…

《 前端挑战与未来:如何看待“前端已死”》

在技术领域,时常会有一些激进的言论引发热议,比如近年来不少人声称“前端已死”。这样的言论引发了广泛的讨论和反思。本文将从几个方向探讨这个话题:为什么会出现“前端已死”的言论、如何看待这种说法、前端技术的未来发展趋势以及前端人如何应对这场职位突围战。 为什么会…

超级副业SOP,各行各业,太全了!

最近收集到一份资料&#xff0c;包含了几乎各行各业的SOP&#xff0c;实在是太全了&#xff0c;这里准备分享给大家 这里可能有一些朋友还不知道&#xff0c;SOP是个什么东西呢 百度说法&#xff1a;所谓SOP&#xff0c;是 Standard Operating Procedure三个单词中首字母的大写…

Spring Cloud 面试题及答案整理,最新面试题

Spring Cloud中断路器的原理及其作用是什么&#xff1f; Spring Cloud断路器的原理和作用基于以下几个关键点&#xff1a; 1、故障隔离机制&#xff1a; 在微服务架构中&#xff0c;断路器作为一种故障隔离机制&#xff0c;当某个服务实例出现问题时&#xff0c;断路器会“断…

浏览器发出一个请求到收到响应步骤详解

前言 在网络通信中&#xff0c;浏览器向Web服务器发送HTTP请求消息的过程是一个复杂而精密的环节&#xff0c;涉及到URL解析、DNS解析、数据拆分、路由表规则和MAC头部添加等一系列步骤。本文将深入探讨这一过程的每个环节&#xff0c;帮助读者更全面地了解浏览器与Web服务器之…

Python实现MACD工具判断信号:股票技术分析的工具系列(1)

Python实现MACD工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;1&#xff09; 介绍代码rolling函数介绍核心代码计算指数移动平均值计算MACD指标 完整代码 介绍 先看看官方介绍&#xff1a; MACD (平滑异同平均线&#xff09; 指标说明 DIF线&#xff1a;收盘价短…

上传文件,页面loading显示文件上传进度

做项目时&#xff0c;弹窗上传文件时&#xff0c;上传动作无法停止&#xff0c;需要加一个蒙层&#xff0c;阻止上传文件过程中的用户操作&#xff0c;并显示文件上传进度&#xff0c;效果如图。 页面上传文件函数 /** 上传文件函数*/ uploadFile(){let config {onUploadProgr…

全网公开!!苍穹外卖或吉瑞外卖等外卖购物项目如何拓展?简历如何写?已经经过不同公司多轮面试。项目中会问到哪些问题?以及问题如何解决?

文章末尾联系作者&#xff0c;免费获取外卖项目的拓展和讲解资料&#xff0c;祝你面试成功 &#xff01;&#xff01;&#xff01; 文章问题的解答&#xff0c;以及作者的规划进步历程&#xff0c;尽在作者的知识库。 想要加入并查阅作者的知识库可以联系作者 不要白嫖&#…

微信报修小程序源码

源码获取方式&#xff1a; 1、搜一搜 万能工具箱合集 然后点击资料库&#xff0c;即可获取资源 一、先看Demo&#xff08;已更新至4.0.0&#xff09; 想看界面图片的&#xff0c;辛苦你爬一下楼&#xff0c;点击下方查看资源&#xff0c;进入官方demo 二、功能介绍 1、当前版…

关于跨境电商知识产权的英语翻译

随着全球化的发展&#xff0c;跨境电商逐渐成为国际贸易的重要组成部分。在这个领域中&#xff0c;知识产权的保护显得尤为重要。那么&#xff0c;对于跨境电商知识产权英语翻译&#xff0c;怎样做比较好&#xff0c;北京哪个翻译公司比较权威&#xff1f; 业内人士指出&#x…