<NuxtLink> in Nuxt 3 only show the page's content after refreshing

Question

I am trying to use <NuxtLink> to redirect in Nuxt 3.

However, my page won't show after the URL change. That means, after clicking the link, the URL changes to whatever is stated in the to="", but the content doesn't show unless I refresh the page. Wonder what did I do wrong.

Here is my Routing code

 <template>
      <div class="top-nav-tab">
        <NuxtLink to="/foundations"><h3>Foundations</h3></NuxtLink>
     </div>
   </template>

Here is my page code

<template>
  <h2>Foundation page</h2>
</template>

Answer 1

I've got the same issue so I use native javascript instead.

// Simulate a mouse click:
window.location.href = "/";

// Simulate an HTTP redirect:
window.location.replace("/");

Answer 2

Instead of using NuxtLink, Why not use another implementation like: navigateTo() as Nuxtlink creates a lazyloaded component by default? So in this use case just do something like

<h3 @click="navigateTo('/foundation')"> Foundation </h3>

This would perform the action; and its preferred way by the documentation