I am using the same page for different routes. Here is my app/router.options.ts.
import type { RouterConfig } from '@nuxt/schema';
export default <RouterConfig>{
routes: (_routes) => [
{
name: 'postDetail',
path: '/f/:feed/:postId/:slug',
component: () => import('~/pages/[...slug].vue'),
},
],
};
This is the page ([...slug].vue) I am building for browsing posts.
// Skeleton of `pages/[...slug].vue`
<template>
<main>
<PostsList />
<PostDetail />
</main>
</template>
I am triggering a route change after selecting each post in <PostsList>. The problem is that the page is fully re-rendered once the route is changed. I know it's default Nuxt behavior which is known as SSR, but that is not desired in my case since I only want re-rendering of the <PostDetail> component.
Is there any workaround to prevent re-rendering of specific page on route change? I am using the latest Nuxt 3.5 and Composition API. I am a big fan and also an old user of Vue.js but am not really good at Nuxt stuff.
Dear community, please give me your hand. It would be very appreciated if you could provide me with any solution from your hands-on experience with Nuxt. Thanks.