Nuxt router leads to wrong link after page reload

Question

First, to demonstrate what I mean, I've set up a demo Nuxt blog at https://debadeepsen.com/nuxtblog/. It has the articles populated by the @nuxt/content package. The deployed website has been generated via the nuxt generate command and as such, is fully static. Now perform the following actions -

• Go to the homepage and click on any of the links.
• It takes you to the article you requested.
• From the article page, you can click on any other link, which'll take you to a different article.

The steps taken above lead to results that are expected. But now, reload any of the article pages. You will notice the following -

• A trailing slash (/) has been added to the URL in the address bar (I haven't tested on all browsers, but this appears to happen on at least Chromium-based ones).
• The URLs for the links now have the current slug segment as part of the base URL, presumably due to the above occurrence. So for example, the second link now points to either https://debadeepsen.com/nuxtblog/what-is-settimeout/what-is-settimeout or https://debadeepsen.com/nuxtblog/vintage-photo-effect-with-css/what-is-settimeout (depending on which page you reloaded).

Obviously, these pages don't exist, and therefore the links are now broken.

My code is pretty straightforward. Here's the navigation menu -

<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.

In my nuxt.config.js, I have -

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

  // ...
}

So, what am I doing wrong here and how can I fix this problem?

Answer 1

Either use named routes in your to property or start the path with a leading /.