Nuxt 3 动态路由和 NuxtLink 不能一起工作

Question

我创建了一条动态路线

/dashboard/[username].vue

。当我通过输入 url 导航到此页面时，一切正常，并且

route.params.username

设置为 url 中传递的值。但是，当我通过

NuxtLink

导航到此页面时，尽管 url 设置正确，但

route.params

是一个空对象。我的

NuxtLink

看起来像这样：

<NuxtLink
  class="btn btn-primary"
  :to="{ name: 'dashboard-username', params: { username } }"
  >Continue</NuxtLink
>

我也尝试过这个，这会导致相同的结果：

<NuxtLink
  class="btn btn-primary"
  :to="`/dashboard/${username}`"
  >Continue</NuxtLink
>

我做错了什么吗？就我个人而言，我认为这种行为很奇怪。使用链接导航到仪表板后，该参数未定义。但是当我重新加载同一页面时，突然该值设置正确了。

Answer 1

我认为您可能错过了动态 [username].vue 页面上的 useRoute 可组合项，如下所示：

<script setup>
const route = useRoute();
const username = route.params.username;
</script>

然后你可以像这样在模板中使用变量：

<template>
    <div>
        Hello {{ username }}!
    </div>
</template>

Answer 2

如果您从 api 获取数据，您可以在 [somrthing].vue 文件中执行此操作：

<script setup>
  const route = useRoute()
  const {data: user} = 
  useFetch(https://jsonplaceholder.typicode.com/users/${route.params.id})
</script>
<template>
  <div>
    <ClientOnly>
        <h1>Hello {{ user.name }}</h1>
        <h1>{{ user.email }}</h1>
        <h1>{{ user.username }}</h1>
        <h1>{{ user.phone }}</h1>
    </ClientOnly>
 </div>
</template>