vue3-动态路由匹配--useRoute()

params

1.路由规则配置接受参数

2.发送数据--同之前

3.接受数据

<template>
  <div class="home">

  
  </div>
</template>

<script lang="ts" setup>
import {onMounted } from 'vue';

 import {useRoute} from "vue-router";
 let route=useRoute()
  onMounted(()=>{
    // 接收params
    console.log(route.params.xiaoming)
  })

</script>

query

1.发送

2.接受

<template>
  <div class="home">

  
  </div>
</template>

<script lang="ts" setup>
import {onMounted } from 'vue';

 import {useRoute} from "vue-router";
 let route=useRoute()
  onMounted(()=>{
    // 接收query
    console.log(route.query.xiaoming)
  })

</script>