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

【问题标题】：Nuxt 3 dynamic route and NuxtLink not working togetherNuxt 3 动态路由和 NuxtLink 不能一起工作
【发布时间】：2023-01-23 03:58:09
【问题描述】：

我创建了一个动态路由/dashboard/[username].vue。当我通过输入 url 导航到此页面时，一切正常，route.params.username 设置为 url 中传递的值。但是，当我通过NuxtLink 导航到此页面时，route.params 是一个空对象，尽管 url 设置正确。我的NuxtLink 看起来像这样：

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

我也试过这个，结果是一样的：

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

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

【问题讨论】：

您确定在导航到“仪表板/[用户名]”之前设置了用户名变量吗？用户名从哪里获得它的价值？
它由文本输入字段设置并使用 v-model 绑定。我 100% 确定此变量工作正常，因为在导航后正确设置了 url。但是，route.params 是空的，但如果我刷新同一页面，它就会被设置。在我看来，路由器/SPA 有问题。

标签： nuxt.js vuejs3 vue-router nuxtjs3

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的回答，但这正是我在 [用户名].vue 中所做的。就像我说的，我想这是路由器的问题，因为当我通过在地址栏中输入 url 导航到页面时它可以工作。
这太奇怪了，因为我正在做完全相同的事情。您是否也尝试过重新运行 npm run dev？有时，当您在 npm run dev 仍在运行时添加新页面时，它会给出您遇到的错误。
重新启动并没有解决它，但重新安装软件包就可以了。感谢好友的帮助！ :)
没问题！很高兴它最终成功了。

【解决方案2】：

我终于改正了错误。

我没有在安装脚本中运行 useRoute() 后立即读取用户名，而是将其移至 onMounted(() => ...)。

我不知道为什么这会导致错误（毕竟，通过 url 直接访问页面时它仍然有效），但我很高兴现在一切正常。

【讨论】：