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

需求:在修改商品时,会进行页面跳转,通过点击修改按钮进行页面跳转。这时我们需要将商品的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.mzph.cn/news/725222.shtml

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

相关文章

体验Node.js的安装和运行

Node.js概述 Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它允许JavaScript代码在服务器端运行&#xff0c;使得开发人员可以使用同一种语言编写前端和后端的代码。Node.js使用事件驱动、非阻塞I/O模型&#xff0c;使其轻量且高效&#xff0c;非常适合数据密集型的实…

mpi4py的安装

一. MPI的安装 1. 下载MPI 安装包 到官网&#xff1a;http://www.mpich.org/downloads/ 下载mpi-3.2.1版本的MPI 包。 2. 解压安装包 到下载安装包的目录下&#xff0c;可以看到有mpi-3.2.1.tar.gz的压缩包&#xff0c;在终端运行如下命令&#xff1a; tar -zxvf mpich-3.…

Leetcode : 506. 相对名次

思路 &#xff1a; 遍历计算每个元素比它大的元素个数&#xff0c;并判断做出对应结果标签&#xff1b; #include <iostream> #include <vector>using namespace std;class Solution { public:vector<string> findRelativeRanks(vector<int>& scor…

短剧系统开发:一种新型的娱乐方式

一、引言 随着科技的快速发展&#xff0c;人们的生活方式也在逐渐改变。在娱乐领域&#xff0c;短剧作为一种新型的娱乐方式&#xff0c;正在受到越来越多人的喜爱。短剧以其短小精悍、情节紧凑、易于观看等特点&#xff0c;迅速占领了市场。因此&#xff0c;开发一款短剧系统…

自动统计日志文件中IP出现次数并添加iptables规则的实现方法

在网络安全领域&#xff0c;我们经常需要监控服务器的访问日志&#xff0c;并根据IP地址出现的频率来判断是否存在恶意访问。本文将介绍如何使用PHP编写一个脚本&#xff0c;自动统计日志文件中IP出现的次数&#xff0c;并根据设定的阈值自动添加iptables规则来阻止恶意IP的访问…

【自然语言处理】【大模型】BitNet:用1-bit Transformer训练LLM

BitNet&#xff1a;用1-bit Transformer训练LLM 《BitNet: Scaling 1-bit Transformers for Large Language Models》 论文地址&#xff1a;https://arxiv.org/pdf/2310.11453.pdf 相关博客 【自然语言处理】【大模型】BitNet&#xff1a;用1-bit Transformer训练LLM 【自然语言…

coqui-ai/TTS 安装使用

Coqui AI的TTS是一款开源深度学习文本转语音工具&#xff0c;以高质量、多语言合成著称。它提供超过1100种语言的预训练模型库&#xff0c;能够轻松集成到各种应用中&#xff0c;并允许用户通过简单API进行个性化声音训练与微调。其技术亮点包括但不限于低资源适应性&#xff0…

RabbitMQ是如何保证高可用的?

RabbitMQ可以通过多种方式来实现高可用性&#xff0c;以确保在硬件故障或其他不可预测的情况下&#xff0c;消息队列系统仍然能够正常 运行。RabbitMQ有三种模式&#xff1a;单机模式&#xff0c;普通集群模式&#xff0c;镜像集群模式。 其中单机模式一般用于demo搭建&#x…

STM32CubeMX学习笔记14 ---SPI总线

1. 简介 1.1 SPI总线介绍 SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。是Motorola(摩托罗拉)首先在其MC68HCXX系列处理器上定义的。 SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在…

softmax和sigmoid的区别

sigmoid 公式&#xff1a; s i g m o i d ( x ) 1 1 e − x sigmoid(x) \frac{1}{1 e^{-x}} sigmoid(x)1e−x1​ 函数曲线如下&#xff1a; 导数公式&#xff1a; f ( x ) ′ e − x ( 1 e − x ) 2 f ( x ) ( 1 − f ( x ) ) f(x)\prime \frac{ e^{-x}}{(1 e^{-x})…

主流电商平台API接口太多?如何选择合适的接口你要的API 接口都给你整理好了~

接口太多不知道怎么选&#xff1f; &#x1f447; 看我给您整理的电商API接口就很一目了然啦 ~ 淘宝平台API商品采集接口 此API目前支持以下基本接口&#xff1a; item_get 获得淘宝商品详情item_get_pro 获得淘宝商品详情高级版item_review 获得淘宝商品评论item_fee 获得淘…

【CSP试题回顾】201604-1-折点计数

CSP-201604-1-折点计数 解题代码 #include <iostream> #include <vector> #include <algorithm> using namespace std;int n, pointSum;int main() {cin >> n;vector<int>myData(n);for (int i 0; i < n; i){cin >> myData[i];}// 统…

何为OOM(Out of Memory)?

OOM&#xff08;Out of Memory&#xff09; 是指程序运行过程中内存不足的情况。在 Spark 应用程序中&#xff0c;OOM 是一个非常常见的问题&#xff0c;尤其是在处理大规模数据集或执行资源密集型的操作时。当 Spark 作业尝试使用的内存超过了为其分配的内存限制时&#xff0c…

【MybatisPlus】QueryWrapper、UpdateWrappe、LambdaQueryWrapper、LambdaUpdateWrapper

一、Wrapper简介 QueryWrapper、UpdateWrapper、LambdaQueryWrapper 和 LambdaUpdateWrapper 都是 MyBatis-Plus 框架中用于构建条件的工具类&#xff0c;它们之间的关系是继承关系。其中 QueryWrapper 和 UpdateWrapper 是基于普通的对象属性名来构建条件的&#xff0c;而 La…

SystemVerilog Constants、Processes

SystemVerilog提供了三种类型的精化时间常数&#xff1a; •参数&#xff1a;与最初的Verilog标准相同&#xff0c;可以以相同的方式使用。 •localparameter&#xff1a;与参数类似&#xff0c;但不能被上层覆盖模块。 •specparam&#xff1a;用于指定延迟和定时值&#x…

python+django+vue电影票订购系统dyvv4

电影院订票信息管理系统综合网络空间开发设计要求。目的是将电影院订票通过网络平台将传统管理方式转换为在网上操作&#xff0c;方便快捷、安全性高、交易规范做了保障&#xff0c;目标明确。电影院订票信息管理系统可以将功能划分为用户和管理员功能[10]。 语言&#xff1a;…

Leetcode 1

题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任…

mybatis在更新一行数据或者插入一条新数据后返回对应的主键id

今天在做项目的时候需要用到上次数据更新或者插入的id&#xff0c;学习了一下找到此方法&#xff0c;记录一下。 在MyBatis中&#xff0c;当插入一条新数据后&#xff0c;可以使用useGeneratedKeys属性和keyProperty属性来获取新插入数据的ID。useGeneratedKeys属性告诉MyBatis…

最小生成树的典型应用

2024-02-01&#xff08;最小生成树&#xff0c;二分图&#xff09;-CSDN博客 如何证明当前这条边可以被选&#xff1f; 假设不选当前边&#xff0c;得到了一棵树&#xff0c;然后将这条边加上&#xff0c;那么必然会出现一个环&#xff0c;在这个环上&#xff0c;一定可以找出一…

超分辨率(1)--基于GAN网络实现图像超分辨率重建

目录 一.项目介绍 二.项目流程详解 2.1.数据加载与配置 2.2.构建生成网络 2.3.构建判别网络 2.4.VGG特征提取网络 2.5.损失函数 三.完整代码 四.数据集 五.测试网络 一.项目介绍 超分辨率&#xff08;Super-Resolution&#xff09;&#xff0c;简称超分&#xff08…