[Bug] The classname of the page does not change based on the route

[Ice-Hazymoon]

Bug

I'm having a serious bug where the classname of a page doesn't change based on the route

On the /about page, the class name should be about-page, but it is index-page

about.vue

<template>
  <div class="about-page">
    <div>Nuxt Vite PWA</div>
    <NuxtLink to="/">
      Home 1
    </NuxtLink>
  </div>
</template>

index.vue

<template>
  <div class="index-page">
    <div>Nuxt Vite PWA</div>
    <NuxtLink to="/about">
      About
    </NuxtLink>
  </div>
</template>

Other

No matter what page I visit, the result is always the content of the index page. Is this normal?

[RifatMahmudno-1]

I've faced similar issue. This module caches the index file. So, if you try to go to other routes, it dynamically updates the content from that index page.
This problem only occurs in SSR websites. Because in SSR your index page is fully rendered unlike spa where your page is rendered in the client side.
In your case you were supposed to deliver fully rendered /about page. Instead, you're delivering '/' page. Which causes this problem.

I solved this problem by assigning a key in NuxtPage or it's container and changing the key if the page isn't / page. This will clientside render the correct page.
You can also solve it by catching all the routes.

I hope the devs will solve this problem.