Vue3和typeScript路由传参

武飞扬头像

Erica_莲子

2024-04-27 帮助1人

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参数")
}
}

学新通

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgggecf

系列文章

同类精品