Nuxt 路由器在页面重新加载后导致错误 link

Question

首先，为了证明我的意思，我在 https://debadeepsen.com/nuxtblog/ 上建立了一个演示 Nuxt 博客。它包含由 @nuxt/content 包填充的文章。部署的网站是通过 nuxt generate 命令生成的，因此是完全静态的。现在执行以下操作 -

• 转到主页并单击任何 link。
• 它会将您带到您请求的文章。
• 在文章页面中，您可以单击任何其他 link，这会将您转到另一篇文章。

上述步骤产生了预期的结果。但是现在，重新加载任何文章页面。您会注意到以下内容 -

• 在地址栏的 URL 中添加了尾部斜杠 (/)（我没有在所有浏览器上进行测试，但这似乎至少在基于 Chromium 的浏览器上会发生）。
• links 的 URLs 现在将当前 slug 段作为基础 URL 的一部分，大概是由于上述情况。因此，例如，第二个 link 现在指向 https://debadeepsen.com/nuxtblog/what-is-settimeout/what-is-settimeout or https://debadeepsen.com/nuxtblog/vintage-photo-effect-with-css/what-is-settimeout（取决于您重新加载的页面）。

显然，这些页面不存在，因此 link 现在已损坏。

我的代码非常简单。这是导航菜单 -

<ul>
  <li v-for="article in list" :key="article.slug">
    <nuxt-link :to="article.slug">
      {{ article.title }}
    </nuxt-link>
  </li>
</ul>

The state variable list has correct data in it, no problem there.

在我的 nuxt.config.js 中，我有 -

export default {
  // ...
  
  router: {
    base: '/nuxtblog/'
  },

  // ...
}

那么，我做错了什么，我该如何解决这个问题？

Answer 1

在您的 to 属性 中使用命名路由，或者以 /.

开头的路径