Nuxt•3mo ago

Dynamic route change without refreshing the page

In Nuxt, I have a dynamic route page like /[category].vue. How can I prevent a full page reload when navigating from one category (e.g., /iphones) to another (e.g., /tablets)?

2 Replies

kapa.ai•3mo ago

Hi @hz2222. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To prevent a full page reload when navigating between dynamic routes like /iphones to /tablets in Nuxt, you should use the <NuxtLink> component for navigation. <NuxtLink> enables client-side navigation, which updates the URL and renders the new page without a full reload, preserving the single-page application (SPA) experience. For example:

<template>
  <NuxtLink to="/iphones">iPhones</NuxtLink>
  <NuxtLink to="/tablets">Tablets</NuxtLink>
</template>

<template>
  <NuxtLink to="/iphones">iPhones</NuxtLink>
  <NuxtLink to="/tablets">Tablets</NuxtLink>
</template>

When you use <NuxtLink>, Nuxt handles the route change on the client side, so only the relevant page component is updated, not the entire page. This is the recommended way to navigate between pages in Nuxt, including dynamic routes like [category].vue files. Additionally, you can use the navigateTo() utility for programmatic navigation, which also avoids a full reload:

function goToCategory(category) {
  return navigateTo(`/${category}`)
}

function goToCategory(category) {
  return navigateTo(`/${category}`)
}

Navigation, Route Parameters If you are experiencing a full page reload, make sure you are not using a standard <a> tag or window.location, as these will trigger a full reload. Stick to <NuxtLink> or navigateTo() for seamless client-side navigation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@993174034940444752> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Dynamic route change without refreshing the page

Did you find this page helpful?