vuｅ３路由的ｐｒｏｐｓ配置

路由写一下代码，代码重点再家一个ｐｒｏｐｒｓ，而且不要忘了再ｐａｔｈ后面写需要传的参数

        {
            path:"/my:kobe/:num/:age",
            name:"my",
            component:()=>import("../views/my.vue"),
            props:true
      }
    

然后我们再获取参数的页面用ｄｅｆｉｎｅＰｒｏｐｓ获取就行了

import {ref,onMounted,toRefs} from "vue";
defineProps(['kobe','num','age'])
onMounted(() => {
})
</script>
<template>
<div>
  <h1>{{ kobe }}</h1>
  <h1>{{ num }}</h1>
  <h1>{{ age }}</h1>
</div>

第二种ｑｕｅｒｙ写法

import {ref} from "vue";

const kobe = ref<string>("传给my");
const num = ref<number>(13565065038);
const age = ref<string>("男");
const list = ref<string[]>(["jio","uie","hsadk","hasudifl"])

</script>

<template>
<div>
  <h1>home</h1>
  <!-- <RouterLink :to="`/my${kobe}/${num}/${age}`">跳转到my</RouterLink> -->
  <!-- 第二种传递的方法 -->
 <router-link :to="{
    name:'my',
    query:{
          kobe:kobe,
          num:num,
          age:age,
    }
}">tiaozhuan </router-link>

</div>
</template>

路由里面写的部分

        {
            path:"/my",
            name:"my",
            component:()=>import("../views/my.vue"),
            props(route){
                   return route.query
            }
      }

获取同样可以用ｄｅｆｉｎｅＰｒｏｐｓ