vue3 vite ts 路由 params参数

news/2025/3/16 18:59:52/文章来源:https://www.cnblogs.com/wt7018/p/18775424

一、区别

let route = useRoute()

注意:

1、params参数可选可不选,参数占位后面+?

2、path占位符

3、使用name

二、案例

1、跳转

<template><ul><RouterLink :to="{name:'detail',params: 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>

2、内容

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

 

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

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

相关文章

Citia Composer2024软件下载与安装教程

CATIA是法国达索公司的产品开发旗舰解决方案。作为PLM协同解决方案的一个重要组成部分,CATIA软件具有以下主要功能和应用领域:‌设计‌:提供从概念设计到最终产品形成的完整设计能力,支持2D、3D、参数化混合建模及数据管理‌3。 ‌分析‌:进行产品分析和仿真,确保设计的可…

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度投影平面坐标之间的快速、精确转…