如何使用 vue 3 组合 api 观看和检索参数的 id 查询数据，而无需手动刷新页面

Question

我有 2 个按钮，一个用于饮料，一个用于食物

两个按钮都在同一个 url 路径上

但是，当我单击其中任何一个时，我会收到一个带有参数的 id 发送到相同的 url，但是随着 id 的更改，字符串发生了更改，所以我执行了一个 for 循环，然后再次得到了这个新数据，但是它们没有他们自己出现，因为需要一个观察者来观察参数查询，或者他们需要手动刷新，我如何为此应用观察者

我检查了你的课程，但没有看到我如何获取后端带来的数据，当我

模板

传递物品路线id

<div v-if="documents">

<div v-for=" doc in formattedDocuments" :key="doc.id">

<router-link class="links" :to="{name:'B2DetailsEN', params: {id:doc.id} } ">

looping through an array in the id

<div v-for="item in cate.items" :key="item.id">

<h1>{{item.title}}

{{item.price}}

</h1>

</div>

</div>

获取可组合文档，从 firebase 获取所有数据

设置

const { error4, document:cate } = getDocument('menuB2En', route.params.id)

Answer 1

不幸的是，我不完全理解你的用例。 如果您停留在同一页面/路线/组件上，您可以在设置中使用

ref

- 或

reactive

- 对象和简单的按钮调用函数，而不是 Router-Links 来更新值。 请参阅：https://vuejs.org/api/reactivity-core.html#ref

但是如果您仍然想在 Vue 3 组合 API 中检索路由参数或查询参数，则需要使用 Vue Router 的

useRoute()

。有了这个对象，你就可以像使用 Vue 2 中的 ol'

$route

一样进行操作。如果你需要推送一些路由，还有一个

useRouter()

可以获取路由器对象。

例如，如果您的路线看起来像这样

your-domain.com/route?name=Zerio

：

import { ref } from '@vue/reactivity'
import { onBeforeMount } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
export default {
    setup() {
        const name = ref("");
        
        onBeforeMount(() => {
            const route = useRoute();
            const queryParam = route.query.name;
            if (queryParam !== undefined) {
                name.value = queryParam;
            }
        });
        
        return {
            name
        }
    },
}

这样做，您可以在模板和设置功能中的任何地方使用

name

。

现在也找了好久，在搜索时发现了这篇文章，所以我想对于所有仍在搜索和找到这篇文章的人来说，这可能是您正在寻找的可能答案。

另请参阅：https://www.koderhq.com/tutorial/vue/composition-api-router-routing/

Answer 2

请参阅此文档：https://router.vuejs.org/guide/advanced/composition-api

在文档的示例中，您可以观看

route.params.id

:

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const userData = ref()

// fetch the user information when params change
watch(
  () => route.params.id,
  async newId => {
    userData.value = await fetchUser(newId)
  }
)
</script>