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