Vue3和typeScript路由传参

1 params传的参数,页面刷新就消失,而query传的参数,页面刷新还会存在,所以通常用query

query传参

跳转页面:拿到router对象,调用push方法做跳转.

import { useRoute,useRouter} from "vue-router";
export default class myView extends Vue {// 返回了路径信息。跟this.$route一样route = useRoute()
//返回了路由对象router = useRouter()handle1():void{this.$router.push({path:"/",name:"home",query:{id:123}})}}

 被跳转页面拿到route对象,读取query参数

import {useRoute} from 'vue-router'
export default class HomeView extends Vue {route = useRoute()// 初始化public created(): void {console.log(this.route.query,"query参数")}
}

 2 params传参,路径要占位,必须用name,不能用path,

占位

import { useRoute,useRouter} from "vue-router";
export default class myView extends Vue {// 返回了路径信息。跟this.$route一样route = useRoute()
//返回了路由对象router = useRouter()handle2():void{this.$router.push({name:"home",params:{id:123,name:"小红"}})}}

接收参数

import {useRoute} from 'vue-router'
export default class HomeView extends Vue {route = useRoute()// 初始化public created(): void {console.log(this.route.params,"params参数")}
}

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

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

相关文章

iOS 搭建组件化私有库

一、创建私有库索引 步骤1是在没有索引库的情况下或者是新增索引的时候才需要用到(创建基础组件库) 首先在码云上建立一个私有库索引,起名为SYComponentSpec 二、本地添加私有库索引 添加私有库索引 pod repo add SYComponentSpec https:/…

Transformer 论文学习笔记

重新学习了一下,整理了一下笔记 论文:《Attention Is All You Need》 代码:http://nlp.seas.harvard.edu/annotated-transformer/ 地址:https://arxiv.org/abs/1706.03762v5 翻译:Transformer论文翻译 特点&#xff1…

ElasticSearch基础篇-Java API操作

ElasticSearch基础-Java API操作 演示代码 创建连接 POM依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…

33.利用abs 解决绝对值问题(matlab程序 )

1.简述 abs函数的功能是绝对值和复数的模 语法 Y abs(X) 说明 Y abs(X) 返回数组 X 中每个元素的绝对值。如果 X 是复数&#xff0c;则 abs(X) 返回复数的模。 示例 标量的绝对值 y abs(-5) y 5 向量的绝对值 创建实值的数值向量。 x [1.3 -3.56 8.23 -5 -0.01…

【POP3/IMAP/SMTP】QQ邮箱设置

什么是 POP3/IMAP/SMTP 服务 POP3 &#xff08;Post Office Protocol - Version 3&#xff09;协议用于支持使用电子邮件客户端获取并删除在服务器上的电子邮件。 IMAP &#xff08;Internet Message Access Protocol&#xff09;协议用于支持使用电子邮件客户端交互式存取服务…

二十三种设计模式第二十二篇--中介者模式

说到这个模式就有趣了&#xff0c;不知道大家在生活中喷到过中介没&#xff1f;其实中介这个词吧&#xff0c;我也说不上好还是坏&#xff0c;有时候他可以帮助人们更快的达到某个目的&#xff0c;但有的时候吧&#xff0c;这个有贼坑人&#xff0c;相信网络上有各种被中介坑的…

【力扣】822. 翻转卡片游戏

以下为力扣官方题解&#xff0c;及本人代码 822. 翻转卡片游戏 题目题意示例 1示例 2提示 官方题解哈希集算法总结复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 在桌子上有 n n n 张卡片&#xff0c;每张卡片的正面和背面都写着一个正数&#xff08;正面与背面上…

Java程序员面试题

Java程序员面试题目 1.Java基础1.1 Java有list&#xff0c;list有很多种&#xff0c;你平时开发喜欢用哪个list&#xff1f;&#xff08;容易&#xff09;1.2 Java的map&#xff0c;你知道有哪几种map&#xff0c;你平时喜欢用哪个&#xff1f;&#xff08;容易&#xff09; 2.…

空指针NPE原因之一:判断顺序错误

不管是&&或者|| 一般都是将null或非null放在第一个判断 在Java中&#xff0c;逻辑运算符&&和||具有短路特性。这意味着如果使用&&运算符&#xff0c;如果第一个条件为false&#xff0c;将不会执行第二个条件&#xff0c;因为整个表达式已经确定为fals…

【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

目录 前言 安装 pip安装 安装包安装 柱状图 主要方法 参数说明 示例代码 效果图 解决中文显示问题 修改后的图片 饼状图 主要方法 示例代码 效果图 动态图 主要方法 动态图官方使用介绍 示例代码 颜色设置 内建颜色 字体设置 资料获取方法 前言 众所周…

【Golang 接口自动化04】 解析接口返回JSON串

目录 前言 解析到结构体 json数据与struct字段是如何相匹配的呢&#xff1f; 解析到interface Go类型和JSON类型 实例代码 simpleJson 总结 资料获取方法 前言 上一次我们一起学习了如何解析接口返回的XML数据&#xff0c;这一次我们一起来学习JSON的解析方法。 JSO…

[驱动开发]gpio子系统及中断实现led亮灭

编写LED灯的驱动&#xff0c;使用GPIO子系统&#xff0c;里面添加按键的中断处理 1.应用程序发送指令控制发光二极管亮灭 2.按键1按下&#xff0c;led1电位反转&#xff1b;按键2按下&#xff0c;led2电位反转&#xff1b;按键3按下&#xff0c;led3电位反转 //头文件 #i…

PHP并发处理详解

在今天的网络世界中&#xff0c;高并发是一个无法避免的问题。随着用户的增加和业务的复杂性&#xff0c;我们的应用可能会面临大量的并发请求。这时&#xff0c;如果我们不能很好地处理并发&#xff0c;就可能会导致应用的性能下降&#xff0c;甚至崩溃。在很多情况下&#xf…

想做上位机,学C#还是QT?

学习C#还是Qt&#xff0c;取决于你的具体需求和偏好。 如果你计划开发跨平台的桌面应用程序&#xff0c;并且希望使用一种更轻量级、直观的界面框架&#xff0c;那么Qt可能是一个不错的选择。Qt是一个功能丰富且成熟的跨平台框架&#xff0c;支持多种开发语言&#xff08;包括…

flask用DBUtils实现数据库连接池

flask用DBUtils实现数据库连接池 在 Flask 中&#xff0c;DBUtils 是一种实现数据库连接池的方案。DBUtils 提供了持久性&#xff08;persistent&#xff09;和透明的&#xff08;transient&#xff09;两种连接池类型。 首先你需要安装 DBUtils 和你需要的数据库驱动。例如&…

springboot 入门

前提是已安装java环境&#xff0c;分为三部分 一、项目构建 二、项目组成 三、常用注解 Demo源码 spring-demo: springboot 入门项目 一、springboot-stater 使用IDEA快速构建springboot项目 1、新建项目 2、选择maven&#xff0c;在选择next 3、填写好项目信息 4、pom…

分布式应用:ELK企业级日志分析系统

目录 一、理论 1.ELK 2.ELK场景 3.完整日志系统基本特征 4.ELK 的工作原理 5.ELK集群准备 6.Elasticsearch部署&#xff08;在Node1、Node2节点上操作&#xff09; 7.Logstash 部署&#xff08;在 Apache 节点上操作&#xff09; 8.Kiabana 部署&#xff08;在 Node1 节点…

maven安装(windows)

环境 maven&#xff1a;Apache Maven 3.5.2 jdk环境&#xff1a;jdk 1.8.0_192 系统版本&#xff1a;win10 一、安装 apache官网下载需要的版本&#xff0c;然后解压缩&#xff0c;解压路径尽量不要有空格和中文 官网下载地址 https://maven.apache.org/download.cgihttps:…

SpringBoot基础认识

创建SpringBoot模块 首先需要引设置maven并引用maven环境 1.打开项目结构&#xff0c;new module&#xff0c;选择Spring Initializr&#xff0c;URL选默认&#xff1a; group填写分组如com.kdy &#xff0c; Artifact起个模块名如springboot_quickstart&#xff0c;Type选择M…

k8s概念-DaemonSet

回到目录 参考链接https://v1-23.docs.kubernetes.io/zh/docs/concepts/workloads/controllers/daemonset/ DaemonSet 确保全部&#xff08;或者某些&#xff09;节点上运行一个 Pod 的副本 当节点加入到K8S集群中&#xff0c;pod会被&#xff08;DaemonSet&#xff09;调度到…