vue3 vite 路由query传参

news/2025/3/16 18:45:41/文章来源:https://www.cnblogs.com/wt7018/p/18775391

一、区别

没有 this.route

let route = userRoute()

route 相当于 this.route

二、路由

<template><ul><RouterLink :to="{path:'/news/detail',query:news}" v-for="news in newList" :key="news.id">{{ news.name }}</RouterLink></ul><div><RouterView></RouterView></div>
</template><script lang="ts" setup name="News">import { reactive } from "vue";import {RouterView, RouterLink} from 'vue-router'let newList = reactive([{id:'01', name:'小米', content:'小米汽车'},{id:'02', name:'理想', content:'大SUV'},{id:'03', name:'小鹏', content:'智驾汽车'}])
</script><style></style>

三、内容((接收参数)

<template><ul><li>新闻标题:{{ route.query.name }}</li><li>新闻内容:{{ route.query.content }}</li></ul>
</template><script lang="ts" setup name="Detail">// useRoute Hooks import {useRoute} from 'vue-router'let route = useRoute()console.log(route);
</script><style></style>

 

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

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

相关文章

Peach-Printer2.0 Web 打印服务解决方案

Peach-Printer1.0在沉寂许久后迎来了一个使用客户,非常感谢客户的支持和理解。 通过客户的使用反馈本人尝试对1.0版本进行完善修改,但始终打印效果未能实现预期。思索许久后决心更改打印控件的底层框架,重新设计打印组件。通过一段时间的摸索与研究终于在3月11日推出了第一个…

老八股谈事务处理,到底在谈什么?

hello, 我是马甲哥, 这是我的第184篇原创技术文章, 也是周志明的软件架构课的读书笔记。 1. 事务处理的目标:数据状态的一致性 当我们谈事务处理,就是在谈确保数据状态的一致性Consistency。 一致性: 确保数据是正确的,不同数据间不会产生矛盾 (这里的一致性与分布式共…

信息论基础(持续更新)

熵、相对熵与互信息 熵 定义:一个离散型随机变量 \(X\) 的熵 \(H(X)\) 定义为: \[H(X)=-\sum_{x \in X}p(x) \log p(x) \]注释:\(X\) 的熵又可以理解为随机变量 \(\log \frac{1}{p(X)}\) 的期望值 引理\(H(X) \geq 0\) \(H_b(X)=(\log_ba)H_a(X)\)二元熵: \[H(X)= -p\log p…

数分笔记2

目录数项级数敛散性定义敛散性例:等比级数(几何级数)定理(级数 \(\sum a_n\) 的 Cauchy 收敛准测)例:\(p\)-级数(\(p>0\),实常数)命题“线性性”定义余项正项级数定义正项级数定理正项数列收敛的充要条件定理(比较原则)DAlembert(达朗贝尔判别法)(比式(比值)…

3.15总结

P1305 新二叉树 首先介绍一下何为先序遍历: 在二叉树中,对于每一对父亲与左右儿子,都按照{父亲,左儿子,右儿子}的顺序来遍历 例如有这样一棵树: 先序遍历的顺序:遍历1,输出“1” 遍历1的左儿子3,输出“3”遍历3的左儿子5,输出“5” 5没有左右儿子,返回3 遍历3的右儿…

SpringBoot配置文件的使用

一.全局文件配置 Spring Boot 使用全局配置文件来允许开发者自定义应用程序的配置。这些配置文件可以用来修改自动配置的设置,或者添加新的配置项。 配置文件的位置和命名:application.properties 或 application.yml:默认情况下,Spring Boot 会在以下位置查找配置文件,并…

SpringBoot配置

一.全局文件配置 Spring Boot 使用全局配置文件来允许开发者自定义应用程序的配置。这些配置文件可以用来修改自动配置的设置,或者添加新的配置项。 配置文件的位置和命名:application.properties 或 application.yml:默认情况下,Spring Boot 会在以下位置查找配置文件,并…

[vue]实现一个天气预报页面

Vue学习笔记之用Vue3+ element plus + axios实现一个天气预报页面前言 使用vue3 + element plus + axios。效果:步骤创建项目并安装依赖npm create vue@latestcd vue3-demo1 npm install npm run devnpm install --save axios vue-axios npm install element-plus --savemain.…

【启程】CSP2024 游记

前言 upd:——希君生羽翼,化北溟鱼,度春风。 初赛前一天晚上开坑,回忆一下去年J组的经历。 回忆幸运的第一轮 初赛是什么?做了一套22年的卷子,连蒙带猜差不多70pts?考场直接瞎写,一半左右都是蒙的,判断去全选对,完善程序全蒙,最后9个判断7个A,30pts的完型蒙到了15p…

[Webpack] 打包优化 二

optimization optimization这个配置项内部的很多优化策略都是在生产环境默认开启的,启用这些规则从一定程序上来讲可以显著减少 bundle 体积,优化代码生成,帮助长期缓存等。 optimization.minimize optimization.minimize指定 webpack 默认使用 terser-webpack-plugin 来压缩…

坐标转换软件 | CGCS2000 经纬度坐标 与 高斯克吕格3度投影平面坐标的互相转换

软件下载地址: 链接: https://pan.baidu.com/s/1ySwut1CpFLTSkGTVy792Fw?pwd=dyzj 提取码: dyzj 关于软件软件介绍:Fast坐标转换软件 是一款专为地理信息系统(GIS)和测绘领域设计的实用工具,旨在实现CGCS2000经纬度(地理坐标)与高斯-克吕格3度投影平面坐标之间的快速、精确转…

可持久化线段树(主席树)学习笔记

可持久化线段树(主席树)学习笔记主席树求解的问题一般是区间历史求值的问题,即对一些点进行操作后,求其中一个版本的答案 最朴素的方法就是每一次操作都将原线段树复制一遍,但是这样很费空间,而且产生了大量无用的点 但是可以发现,每次修改时所走的路径其实只经过了根到对…