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

最新推荐文章于 2025-09-18 09:43:52 发布

原创最新推荐文章于 2025-09-18 09:43:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue中通过路由规则配置来传递参数，并演示了如何使用params和query两种方式发送和接收数据。

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>