Vue3和typeScript路由传参

news/2024/11/20 9:48:43/

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.ppmy.cn/news/999927.html

相关文章

K8s影响Pod调度和Deployment

5.应用升级回滚和弹性伸缩

【有趣的设计模式】23 种设计模式详解和场景分析

前言 七大设计原则 1、单一原则:一个类只负责一个职责 2、开闭原则:对修改关闭,对扩展开放 3、里氏替换原则:不要破坏继承关系 4、接口隔离原则:暴露最小接口,避免接口过于臃肿 5、依赖倒置原则&#xff1…

pandas read excel 更改string列为时间类型

设想我们有如下一个excel文件 我们都知道上面那个时间列其实是string类型,因此在用pandas做时间校验的时候会不通过,我们可以在read_excel的时候,指定这一列做转换 import pandas as pd from datetime import datetime, timedelta import n…

P1036 [NOIP2002 普及组] 选数

从n个数中选m个数 题目描述 已知 n 个整数 1,2,⋯ ,x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 k&#xff08;k<n&#xff09;。从 n 个整数中任选 k 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&am…

基于DCT变换和huffman编码的语音压缩算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 多通道滤波 4.2 DCT变换 4.3 量化 4.3 哈夫曼编码 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................…

Day02-作业(JavaScriptVue)

作业1&#xff1a;实现5秒之后&#xff0c;当前页面直接跳转到官网首页&#xff08;首页地址&#xff1a;https://www.itcast.cn&#xff09; 提示&#xff1a; 5秒之后&#xff0c;才触发某一个动作 素材&#xff1a; <!DOCTYPE html> <html lang"en"&g…

【Unity3D】Shader Graph简介

1 Shader Graph 简介 Shader Graph 是 Unity 官方在 2018 年推出的 Shader 制作插件&#xff0c;是图形化的 Shader 制作工具&#xff0c;类似于 Blender 中的 Shader Editor 和 UE 中的 Material Editor&#xff0c;它使用流程图的形式表达顶点变换和片元着色的流程。 Shader …

Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展

我们非常兴奋地宣布&#xff0c;Amazon Aurora Serverless v2 现已面向 Aurora PostgreSQL 和 MySQL 正式发布。Aurora Serverless 是一种面向 Amazon Aurora 的按需自动扩展配置&#xff0c;可让您的数据库根据应用程序的需求扩展或缩减容量。 亚马逊云科技开发者社区为开发者…