第十八:路由传参 query

news/2025/2/27 5:04:38

第一种方法:传递参数:

<RouterLink to ="/news/detail?id=naaa&title=bbbb&content=ccccccc">{{ news.title }}</RouterLink>

上面的是不对的,如果的 模板字符串里面 嵌入 js  那么应该如下所示: ${news.id}

第一种种写法:

<RouterLink :to ="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink>

第二种写法:<!-- 跳转并携带query参数(to的对象写法) -->

RouterLink :to = "{

//name:'xiang', //用name也可以跳转

path:'/news/detail',

query:{

id : news.id,

title: news.title,

content: news.content,

}

}">

{{ news.title }}

</RouterLink>

第二步:接收参数:

首先必须引入: route 路由

import {useRoute} from 'vue-router'     // useRoute 是 hooks 的对象

const route = useRoute()  // 接收路由的参数
// 打印query参数
console.log(route.query)  // console.log('@',route)  // 打印出来是什么东西 用@ 符分隔

注意: 如果从一个响应式属性中去解构数据 必定失效 ,所以必须加一个 toRefs

import { toRefs } from 'vue';

import {useRoute} from 'vue-router'     // useRoute 是 hooks 的对象

const route = useRoute()  // 接收路由的参数

let {query} = toRefs(route)   // 定义一个query
// 打印query参数
console.log(route.query)  // console.log('@',route)  // 打印出来是什么东西 用@ 符分隔


http://www.niftyadmin.cn/n/5869460.html

相关文章

无人机实战系列(三)本地摄像头+远程GPU转换深度图

这篇文章将结合之前写的两篇文章 无人机实战系列&#xff08;一&#xff09;在局域网内传输数据 和 无人机实战系列&#xff08;二&#xff09;本地摄像头 Depth-Anything V2 实现了以下功能&#xff1a; 本地笔记本摄像头发布图像 远程GPU实时处理&#xff08;无回传&#…

labview实现有符号位16进制转二进制补码转真值

今天在用一个采集模块时&#xff0c;发现读出寄存器的数据是不同的&#xff0c;它有两种范围&#xff0c;一个时十六进制整型&#xff0c;一种是有符号位十六进制&#xff0c;对应的量程和范围也是不同的&#xff0c;针对之前读取温度没有出现负数的情况&#xff0c;应该是转成…

批量导出数据库表到Excel

这篇文章将介绍如何批量的将多个甚至成千上万的数据库表导出为Excel文件。 准备数据 如下图是数据库里的表&#xff0c;我们需要将它们全部导出为excel文件&#xff0c;这里以SQL Server数据库为例 新增导出 打开的卢导表工具&#xff0c;新建数据库连接&#xff0c;这里以S…

链表3(LinkedList)

1、双向不带头链表的实现 1.1 节点成员和构造方法 双向不带头链表相比于单向多了一个prev域&#xff0c;它能使链表获得前驱节点。 如上图是双向不带头链表的一个节点&#xff0c;它可以直接找到前驱和后继节点。 由上面的讲解可得到代码&#xff1a;&#xff08;注意&#xf…

获取GitHub的OAuth2的ClientId和ClientSecrets

获取 GitHub OAuth2 登录所需的 client-id 和 client-secret 登录 GitHub&#xff1a;使用你的 GitHub 账号登录到 GitHub。访问开发者设置&#xff1a;点击右上角的头像&#xff0c;选择 Settings&#xff0c;然后在左侧导航栏中选择 Developer settings。创建新的 OAuth 应用…

被裁20240927 --- WSL-Ubuntu20.04安装cuda、cuDNN、tensorRT

cuda、cuDNN、tensorRT的使用场景 1. CUDA&#xff08;Compute Unified Device Architecture&#xff09; 作用&#xff1a; GPU 通用计算&#xff1a;CUDA 是 NVIDIA 的并行计算平台和编程模型&#xff0c;允许开发者直接利用 GPU 的并行计算能力&#xff0c;加速通用计算任…

springcloud nacos 整合seata解决分布式事务

文章目录 nacos安装Mysql5.7安装及表初始化seata server安装下载并解压seata安装包在conf文件夹修改file.conf文件向本地数据库导入seata需要的表修改registry.conf文件将seata配置信息添加到nacos配置中心启动seata server springcloud整合seata测试流程正常下单流程扣减库存失…

学习路程四 向量数据库Milvus安装与连接

前序 在之前&#xff0c;已经简单完成了文档的加载&#xff0c;分割&#xff0c;向量化这些步骤&#xff0c;最后得到了结果。但是这些数据都是一次性的。假设一个律师所&#xff0c;有几千上万份卷宗&#xff0c;不可能每次使用都重新向量化数据吧。 所以我们需要有一个地方存…