Let me show you exactly what I mean by setting up a demo Nuxt blog at https://example.com/nuxtblog/. This demonstration includes articles populated by the @nuxt/content package. The website has been generated statically using the nuxt generate command. Follow these steps:
- Visit the homepage and click on any of the links.
- You will be directed to the requested article.
- From the article page, click on another link to navigate to a different article.
The expected results are achieved with the above steps. However, now try reloading any of the article pages and observe the following:
- A trailing slash (/) is automatically added to the URL in the browser's address bar (this behavior seems consistent on Chromium-based browsers).
- The URLs for the links now include the current slug segment as part of the base URL, leading to addresses like https://example.com/nuxtblog/what-is-settimeout/what-is-settimeout or https://example.com/nuxtblog/vintage-photo-effect-with-css/what-is-settimeout (depending on the page reloaded).
These newly formed URLs do not correspond to actual pages, thus breaking the links.
The code structure is simple enough. Here is the snippet for the navigation menu:
<ul>
<li v-for="article in list" :key="article.slug">
<nuxt-link :to="article.slug"&g
t;
{{ article.title }}
</nuxt-link>
</li>
</ul>
The variable
listcontains accurate data, so there shouldn't be an issue there.
In my nuxt.config.js file, the configuration includes:
export default {
// ...
router: {
base: '/nuxtblog/'
},
// ...
}
If you have knowledge of how to resolve this problem, please advise on what could be causing this unexpected behavior and suggest potential solutions.