vue3一个值传到另一个页面，根据这个值查询数据

要将一个值传递到另一个页面，可以使用 Vue Router 的路由参数。在发送请求时，可以将这个值作为参数传递给后端，然后后端返回相应的数据。以下是一个简单的示例代码：

在发送页面：

<template>
  <button @click="goToDetail">查看详情</button>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const value = '要传递的值'
    
    const goToDetail = () => {
      router.push({
        name: 'detail',
        params: { value }
      })
    }
    
    return { goToDetail }
  }
}
</script>

在接收页面：

<template>
  <div>{{ data }}</div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const value = computed(() => router.params.value)
    const data = ref(null)
    
    const fetchData = async () => {
      const res = await axios.get(`/api/getData?value=${value.value}`)
      data.value = res.data
    }
    
    watch(value, () => {
      fetchData()
    }, { immediate: true })
    
    return { data }
  }
}
</script>

在这个示例中，我们在发送页面中定义了一个 `value` 变量，并在点击按钮时将其作为参数传递给了路由。在接收页面中，我们使用 `useRouter` 获取路由对象，并通过 `computed` 监听路由参数的变化。当路由参数变化时，我们使用 `axios` 发送请求，并将返回的数据存储在 `data` 变量中。最后，我们将 `data` 变量渲染到页面中。