当前位置: 首页 > news >正文

【Vue-Router】路由传参

1. query 传参

在这里插入图片描述
list.json

{"data": [{"name": "面","price":300,"id": 1},{"name": "水","price":400,"id": 2},{"name": "菜","price":500,"id": 3}]}

login.vue

<template><h1>我是列表页面</h1><table cellpadding="0" class="table" border="1"><thead><tr><th>商品</th><th>价格</th><th>操作</th></tr></thead><tbody><tr :key="item.id" v-for="item in data"><th>{{ item.name }}</th><th>{{ item.price }}</th><th><button @click="toDetail(item)">详情</button></th></tr></tbody></table>
</template><script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';const router = useRouter()type Item = {name: string;price: number;id: number;
}const toDetail = (item: Item) => {router.push({path: '/reg',query: {id: item.id,name: item.name,price: item.price}})
}
</script><style scoped>
.table {width: 400px;
}
</style>

reg.vue

<template><h1>我是列表页面</h1><button @click="router.back">返回</button><div style="font-size: 20px;">品牌:{{ route.query.name }}</div><div style="font-size: 20px;">价格:{{ route.query.price }}</div><div style="font-size: 20px;">id: {{ route.query.id }}</div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';const router = useRouter();
const route = useRoute();</script><style scoped>
.reg {background-color: green;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

App.vue

<template><h1>hello world</h1><hr><router-view></router-view>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();</script><style scoped></style>

在这里插入图片描述
在这里插入图片描述

2. 动态路由参数

index.ts

import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";const routes: Array<RouteRecordRaw> = [{path: "/",name: 'Login',component: () => import("../components/login.vue")},{path: "/reg/:id",name: 'Reg',component: () => import("../components/reg.vue")}
]const router = createRouter({history: createWebHistory(),routes
})export default router

reg.vue

<template><h1>我是列表页面</h1><button @click="router.back()">返回</button><div style="font-size: 20px;">品牌:{{ item?.name }}</div><div style="font-size: 20px;">价格:{{ item?.price }}</div><div style="font-size: 20px;">id: {{ item?.id }}</div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';const router = useRouter();
const route = useRoute();
// 返回对象用item接收
const item = data.find(v => v.id === Number(route.params.id))</script><style scoped>
.reg {background-color: green;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

item?.name ,item?.price ,item?.id,他们如果不使用可选链操作符会出现报错:'__VLS_ctx.item' is possibly 'undefined'.

login.vue

<template><h1>我是列表页面</h1><table cellpadding="0" class="table" border="1"><thead><tr><th>商品</th><th>价格</th><th>操作</th></tr></thead><tbody><tr :key="item.id" v-for="item in data"><th>{{ item.name }}</th><th>{{ item.price }}</th><th><button @click="toDetail(item)">详情</button></th></tr></tbody></table>
</template><script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';const router = useRouter()type Item = {name: string;price: number;id: number;
}const toDetail = (item: Item) => {router.push({// name 对应 router 的 namename: 'Reg',// 不会展示在URL上,存在于内存里params: {id: item.id}})
}
</script><style scoped>
.table {width: 400px;
}
</style>

在这里插入图片描述

相关文章:

【Vue-Router】路由传参

1. query 传参 list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水","price":400,"id": 2},{"name": "菜","price":500,"…...

平板选择什么电容笔比较好?ipad手写笔推荐品牌

在现在的生活上&#xff0c;有了iPad平板&#xff0c;一切都变得简单了许多&#xff0c;也让我们的学习以及工作都更加的便利。这其中&#xff0c;电容笔就起到了很大的作用&#xff0c;很多人都不知道&#xff0c;到底要买什么牌子的电容笔&#xff1f;哪些电容笔的性价比比较…...

什么是数字化车间

一、数字化车间概述 数字化车间是以现代化信息、网络、数据库、自动识别等技术为基础&#xff0c;通过智能化、数字化、MES系统信息化等手段融合建设的数字化生产车间&#xff0c;精细地管理生产资源、生产设备和生产过程。随着工业4.0概念的提出&#xff0c;未来的工业和制造…...

创新零售,京东重新答题?

继新一轮组织架构调整后&#xff0c;京东从低价到下沉动作不断。 新成立的创新零售部在京东老将闫小兵的带领下悄然完成了整合。近日&#xff0c;京喜拼拼已改名为京东拼拼&#xff0c;与七鲜、前置仓等业务共同承载起京东线上线下加速融合的梦想。 同时&#xff0c;拼拼的更…...

面向对象设计与分析40讲(20)消息驱动编程和事件驱动编程模型

文章目录 消息驱动编程事件驱动编程消息驱动和事件驱动的区别 消息驱动编程 消息驱动是一种编程模型&#xff0c;它基于事件和消息的传递来驱动程序的执行流程。在消息驱动的模型中&#xff0c;系统中的各个组件&#xff08;或对象&#xff09;通过发送和接收消息进行通信和协…...

【c语言】指针进阶(超详细)

文章目录 ✈ 指向函数指针数组的指针&#x1f4cc;指向函数指针数组的指针的定义&#x1f4cc;指向函数指针数组的数组指针的使用 ✈回调函数&#x1f4cc; 回调函数的定义&#x1f4cc; 回调函数的使用 ✈qsort函数&#x1f4cc; qsort函数的作用&#x1f4cc;qsort函数的定义…...

C++入门篇8---vector

vecctor是动态顺序表 一、了解vector的相关接口及其功能 1.构造函数相关接口 函数声明功能介绍vector()无参构造vector(size_type n,const value_type& valvalue_type())构造并初始化n个valvector(const value& x)拷贝构造vector(InputIterator first, InputIterato…...

【学会动态规划】最大子数组和(19)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

怎么做Tik Tok海外娱乐公会呢?新加坡市场怎么样?

一、为什么选择TikTok直播 1. 海外市场潜力巨大 • 自2016年始&#xff0c;多家直播平台陆续拓展至东南亚、中东、俄罗斯、日韩、欧美、拉美等地区。 • 海外市场作为直播发展新蓝海&#xff0c;2021年直播行业整申请cmxyci体规模达百亿美元&#xff0c;并维持高速增长。 &a…...

mysql主从复制搭建

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言MySQL复制过程分为三部&#xff1a; 一、准备工作二、配置>主库Master三、配置>从库SlaveSlave_IO_Running: YesSlave_SQL_Running: Yes 四、测试至此&am…...

Java:正则表达式案例:爬数据,重复数据替换,数据分割

使用正则表达式查找一段文本中的内容 需求:请把下面文本中的电话&#xff0c;邮箱&#xff0c;座机号码&#xff0c;热线都爬取出来。 String data "电话:1866668888&#xff0c;18699997777\n" "或者联系邮箱: boniuitcast.cn&#xff0c;\n" "座机…...

CF 765D Artsem and Saunders 构造

CF765D Artsem and Saunders 直接猜一种构造做法&#xff0c; h ( x ) h(x) h(x)的值域一定和 f ( x ) f(x) f(x)的值域一样&#xff0c;我们先满足 h ( g ( x ) ) f ( x ) h(g(x))f(x) h(g(x))f(x)这个条件&#xff0c;遍历 f ( x ) f(x) f(x)&#xff0c;每次添加 h ( x ) h…...

DevOps系列文章 之 SpringBoot整合GitLab-CI实现持续集成

在企业开发过程中&#xff0c;我们开发的功能或者是修复的BUG都需要部署到服务器上去&#xff0c;而这部分部署操作又是重复且繁琐的工作&#xff0c;GitLab-CI 持续集成为我们解决了这一痛点&#xff0c;将重复部署的工作自动化&#xff0c;大大的节省了程序员们的宝贵时间。本…...

K8S系列二:实战入门

I. 配置kubectl 1.1 什么是kubectl&#xff1f; 官方文档中介绍kubectl是&#xff1a; Kubectl 是一个命令行接口&#xff0c;用于对 Kubernetes 集群运行命令。Kubectl的配置文件在$HOME/.kube目录。我们可以通过设置KUBECONFIG环境变量或设置命令参数–kubeconfig来指定其他…...

form中表单切换,导致 relus 中的事件无法触发,原因:页面切换不要一直切换DOM,会导致问题,需要都显示出来

修改前&#xff0c;因为重复渲染DOM导致绑定rules失效 修改前代码使用 computed 计算出渲染的DOM&#xff0c;影响rules事件<el-formref"form"inline:model"billDetailCopy":rules"rules"size"small"label-position"right&quo…...

Android Ble蓝牙App(五)数据操作

Ble蓝牙App&#xff08;五&#xff09;数据操作 前言正文一、操作内容处理二、读取数据① 概念② 实操 三、写入数据① 概念② 实操 四、打开通知一、概念二、实操三、收到数据 五、源码 前言 关于低功耗蓝牙的服务、特性、属性、描述符都已经讲清楚了&#xff0c;而下面就是使…...

.netcore grpc双向流方法详解

一、双向流处理概述 简单来讲客户端可以向服务端发送消息流&#xff0c;服务端也可以向客户端传输响应流&#xff0c;即客户端和服务端可以互相通讯客户端无需发送消息即可开始双向流式处理调用 。 客户端可选择使用 RequestStream.WriteAsync 发送消息。 使用 ResponseStream…...

【Servlet】(Servlet API HttpServlet 处理请求 HttpServletRequest 打印请求信息 前端给后端传参)

文章目录 Servlet APIHttpServlet处理请求 HttpServletRequest打印请求信息前端给后端传参 Servlet API Servlet中常用的API HttpServlet 实际开发的时候主要重写 doXXX 方法, 很少会重写 init / destory / service destory 服务器终止的时候会调用. //下面的注解把当前类和…...

java中右移>>和无符号右移>>>的区别

public static void main(String[] args) {byte[] dest new byte[2];dest[0] 0x15; //0001 0101dest[1] (byte) 0xfb;//1111 1011System.out.println((dest[0] >> 4) & 0xff);//右移 应该是0000 0001 十进制结果显示1 结果也是1&#xff0c;正确System.out.printl…...

牛客周赛 Round 7

目录 A 游游的you矩阵 题目&#xff1a; 题解&#xff1a; AC 代码&#xff1a; B 游游的01串操作 题目&#xff1a; 题解&#xff1a; AC 代码&#xff1a; C 游游的正整数 题目&#xff1a; 题解&#xff1a; AC 代码&#xff1a; D 游游的选数乘积 题目&#xf…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...