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;非常适合数据密集型的实…

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;开发一款短剧系统…

【自然语言处理】【大模型】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];}// 统…

【MybatisPlus】QueryWrapper、UpdateWrappe、LambdaQueryWrapper、LambdaUpdateWrapper

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

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

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

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

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

云计算OpenStack KVM迁移

动态迁移 static migration 静态迁移 cold migration 冷迁移 offline migration 离线迁移 live migration 动态迁移 hot migration 热迁移 online migration 在线迁移 衡量 整体迁移时间 服务器停机时间 性能影响(迁移后和其它客户机) 特点 负载均衡 解除硬件依赖…

领腾讯云红包,可抵扣云服务器订单金额

在2024年腾讯云新春采购节优惠活动上&#xff0c;可以领取新年惊喜红包&#xff0c;打开活动链接 https://curl.qcloud.com/oRMoSucP 会自动弹出红包领取窗口&#xff0c;如下图&#xff1a; 腾讯云2024新春采购节红包领取 如上图所示&#xff0c;点击“领”红包&#xff0c;每…

外包干了10天,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;2019年我通过校招踏入了南京一家软件公司&#xff0c;开始了我的职业生涯。那时的我&#xff0c;满怀热血和憧憬&#xff0c;期待着在这个行业中闯出一片天地。然而&#xff0c;随着时间的推移&#xff0c;我发现自己逐渐陷入…

2024年阿里云域名优惠口令更新,亲测有效口令大全

2024年阿里云域名优惠口令&#xff0c;com域名续费优惠口令“com批量注册更享优惠”&#xff0c;cn域名续费优惠口令“cn注册多个价格更优”&#xff0c;cn域名注册优惠口令“互联网上的中国标识”&#xff0c;阿里云优惠口令是域名专属的优惠码&#xff0c;可用于域名注册、续…

aiofiles,一个超酷的 Python 异步编程库!

目录 前言 什么是aiofiles库&#xff1f; 安装aiofiles库 基本功能 1. 异步打开文件 2. 异步读取文件 3. 异步写入文件 4. 异步追加内容到文件 应用场景 1. 异步Web服务器 2. 异步数据处理 3. 异步日志记录 总结 前言 大家好&#xff0c;今天为大家分享一个超酷的 Pytho…

stack/queue

链表完了之后就是我们的栈和队列了&#xff0c;当然我们的STL中也有实现&#xff0c;下面我们先来看一下简单用法&#xff0c;跟我们之前C语言实现的一样&#xff0c;stack和queue有这么几个重要的成员函数 最主要的就是这么几个&#xff1a;empty&#xff0c;push&#xff0c;…

Spring揭秘:ImportBeanDefinitionRegistrar应用场景及实现原理!

内容概念 ImportBeanDefinitionRegistrar接口提供了强大的动态注册Bean的能力&#xff0c;它允许开发者在Spring容器初始化时&#xff0c;灵活地根据特定条件或需求来添加或修改Bean定义&#xff0c;从而实现更为精细的控制和扩展性。这是构建可扩展框架、插件系统或处理复杂配…