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

Vue3学习-vue-router之路由传参

传参方案一:RouterLink 字符串

//传值
<RouterLink to="/page?a=1&b=2">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)

传参方案二:RouterLink 对象

  • query传参
//传值
<RouterLink :to="{ path:'/page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)
  • params
// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',......
}
//取值-解构取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { params }= toRefs(useRoute())
console.log(params.a)
console.log(params.b)

传参方案三:RouterLink 对象 + Props

// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',// 将 params 作为props 方式传给组件//props: true,  // 配置项写法props(route){   // 函数式写法return {...route.query}},props:{   // 对象式写法a:1,b:2},......
}
//取值-解构取值
defineProps({ a,b })
console.log(a)
console.log(b)

相关文章:

Vue3学习-vue-router之路由传参

传参方案一&#xff1a;RouterLink 字符串 //传值 <RouterLink to"/page?a1&b2">{{ RouterLink 字符串传参 }}</RouterLink> //取值 import { toRefs } from vue import { useRoute } from vue-router const { query} toRefs(useRoute()) console.…...

ubuntu20.04 10分钟搭建无延迟大疆无人机多线程流媒体服务器

1.使用效果 无人机画面 2.服务器视频端口 3.使用教程 3.1.下载ubuntu对应软件包&#xff1a;系统要求ubuntu16以上 3.2修改端口&#xff08;config.xml文件&#xff09; 3.3启动服务 目录下输入&#xff1a;终端启动&#xff1a;./smart_rtmpd 后台启动&#xff1a;nohup ./…...

hugging face笔记:PEFT

1 介绍 PEFT (Parameter-Efficient Fine Tuning) 方法在微调时冻结预训练模型参数&#xff0c;并在其上添加少量可训练的参数&#xff08;称为适配器&#xff09;这些适配器被训练用来学习特定任务的信息。这种方法已被证明在内存效率和计算使用上非常高效&#xff0c;同时能产…...

作业5.26

定义一些常量和数据结构来存储用户信息和消息。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h>#define MAX_USERS 100 // 最大用户数 #define MAX_M…...

银河麒麟服务器系统xshell连接之后主动断开,报错socket error event:32 Error:10053问题分析

银河麒麟服务器系统xshell连接之后主动断开&#xff0c;报错socket error event&#xff1a;32 Error&#xff1a;10053问题分析 一 问题描述二 系统环境三 问题分析3.1 与正常机器对比sshd文件内容以及文件权限3.2 检查同网段内是否配置多个相同的IP地址 四 后续建议 一 问题描…...

蓝桥杯算法心得——李白打酒(加强版)

大家好&#xff0c;我是晴天学长&#xff0c;记忆化搜索&#xff0c;找到技巧非常重要&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 2) .算法思路 1.memo三维表示记录的结果 3&#xff09;.算法步骤 1…...

java练习2

题目要求 创建一个Color枚举类有RED,BLUE,BLACK,YELLOW,GREEN这五个枚举值/对象Color有三个属性redValue&#xff0c;greenValue&#xff0c;blueValue创建构造方法&#xff0c;参数包括这三个属性每个枚举值都要给这三个属性赋值&#xff0c;三个属性对应的值分别是red&#…...

【安装笔记-20240523-Windows-安装测试 ShareX】

安装笔记-系列文章目录 安装笔记-20240523-Windows-安装测试 ShareX 文章目录 安装笔记-系列文章目录安装笔记-20240523-Windows-安装测试 ShareX 前言一、软件介绍名称&#xff1a;ShareX主页官方介绍 二、安装步骤测试版本&#xff1a;16.1.0下载链接功能界面 三、应用场景屏…...

2024年150道高频Java面试题(七十一)

141. spring cloud 的核心组件有哪些&#xff1f; Spring Cloud 是一个基于Spring Boot实现的微服务架构开发工具集&#xff0c;它为微服务架构中的诸多问题提供了解决方案。Spring Cloud的核心组件主要包括以下这些&#xff1a; Spring Cloud Config&#xff1a;提供服务器和…...

【深度学习】2.单层感知机

目标&#xff1a; 实现一个简单的二分类模型的训练过程&#xff0c;通过模拟数据集进行训练和优化&#xff0c;训练目标是使模型能够根据输入特征正确分类数据。 演示: 1.通过PyTorch生成了一个模拟的二分类数据集&#xff0c;包括特征矩阵data_x和对应的标签数据data_y。标签…...

JS经常碰见的报错问题

语法错误&#xff1a;由于 JavaScript 是一种动态语言&#xff0c;因此编写代码期间可能会出现语法错误。这可能包括拼写错误、漏掉分号或括号等问题。 作用域问题&#xff1a;JavaScript 中存在全局作用域和局部作用域的概念&#xff0c;有时候可能会出现变量作用域混乱导致的…...

纯前端实现截图功能

纯前端实现截图功能 一、插件二、主要代码 一、插件 一、安装html2canvas、vue-cropper npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪二、在main.js注册vue-cropper组件 import VueCropper from vue-cropper Vue.use(VueCropper…...

【网络协议】应用层协议--HTTP

文章目录 一、HTTP是什么&#xff1f;二、HTTP协议工作过程三、HTTP协议1. fiddler2. Fiddler抓包的原理3. 代理服务器是什么?4. HTTP协议格式1.1 请求1.2 响应 四、认识HTTP的请求1.认识HTTP请求的方法2.认识请求头&#xff08;header&#xff09;3.认识URL3.1 URL是什么&…...

【图书推荐】《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》

配套示例源码与PPT课件下载 百度网盘链接: https://pan.baidu.com/s/1nBQLd9UugetofFKE57BE5g?pwdqm9f 自学能力强的&#xff0c;估计不要书就能看代码学会吧。 内容简介 本书通过对Vue.js&#xff08;简称Vue&#xff09;的示例和综合案例的介绍与演练&#xff0c;使读者…...

抖店如何打造出爆品?学好这几招,轻松打爆新品流量

大家好&#xff0c;我是电商花花。 近年来&#xff0c;抖店商家越来越多&#xff0c;而选品&#xff0c;爆品就是我们商家竞争的核心了&#xff0c;谁能选出好的新品&#xff0c;打造出爆品&#xff0c;谁的会赚的多&#xff0c;销量多。 做抖音小店想出单&#xff0c;想赚钱…...

软件需求规范说明模板

每个软件开发组织都会为自己的项目选用一个或多个标准的软件需求规范说明模板。有许多软件需求规范说明模板可以使用(例如ISO/IEC/IEEE2011;Robertson and Robertson2013)。如果你的组织要处理各种类型或规模的项目&#xff0c;例如新的大型系统开发或是对现有系统进行微调&…...

vs2013使用qt Linguist以及tr不生效问题

一、qt Linguist&#xff08;语言家&#xff09;步骤流程 1、创建翻译文件,在qt选项中 2.选择对应所需的语言&#xff0c;得到.ts后缀的翻译文件 3.创建.pro文件&#xff0c;并将.ts配置在.pro文件中 3.使用qt Linguist 打开创建好的以.ts为后缀的翻译文件&#xff0c;按图所示…...

Leetcode 3163. String Compression III

Leetcode 3163. String Compression III 1. 解题思路2. 代码实现 题目链接&#xff1a;3163. String Compression III 1. 解题思路 这一题的话就是一个简单的贪婪算法&#xff0c;把相同的字符进行归并&#xff0c;然后按照题目中的表示方法进行表示一下即可。 2. 代码实现…...

Java匿名内部类的使用

演示匿名内部类的使用&#xff0c;很重要 package com.shedu.Inner;/*** 演示匿名内部类的使用*/ public class AnonymousInnerClass {//外部其他类public static void main(String[] args) {Outer04 outer04 new Outer04();outer04.method();} }class Outer04{//外部类priva…...

把自己的垃圾代码发布到官方中央仓库

参考博客&#xff1a;将组件发布到maven中央仓库-CSDN博客 感谢这位博主。但是他的步骤有漏缺&#xff0c;相对进行补充 访问管理页面 网址&#xff1a;Maven Central 新注册账号&#xff0c;或者使用github快捷登录&#xff0c;建议使用github快捷登录 添加命名空间 注意&…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...