How to force route component to be reused not recreated when navigating between routes uses same component?

[darklow]

I have defined dynamic routes using single regexp in router.options.ts and they all point to same component. Yet when navigating between these routes component is being recreated each time, not reused.

How to force in nuxt3 to use same component, not recreate new one when navigating between routes with same component? Similarly as it is done on Vue/Router without nuxt.

Similar discussions where on previous nuxtjs version and setting key param on page component worked, but this doesn't work in nuxt 3.

Or as a workaround, it it somehow possible to prevent loading new route component through middleware, yet allowing changing the URL.

Any other ideas maybe? Thank you.

[manniL]

You can define an own key function via definePageMeta. If the result is the same across pages, the component will be reused.

// from my [...slug].ts page
definePageMeta({
  key: route => (route.params.slug as string[])[0], // Depend only on the first parameter
})

Example with fixed slug.

1. Open StackBlitz via Link
2. Follow to /test
3. See "mounted" in console
4. Click the link
5. See no new "mounted" in console, component is reused

[darklow]

@manniL Unfortunately this doesn't help, I already tried adding key even as fixed string and still on every route change same component is recreated, not reused from previous route.

[manniL]

Added an example above ☺️

[darklow]

Thank you, indeed it works, let me recreate my setup, maybe because I use router.options.ts it behaves different

[darklow]

Indeed, as soon as I use router.options.ts it doesn't work anymore, here I recreated your example: https://stackblitz.com/edit/nuxtframeworkdiscussions948-q9xqj5?file=app/router.options.ts

[manniL]

Good point. Then you have to define your meta there (or take it from the current route) AFAIK.

[darklow]

If anyone has same problem, as a workaround, instead of using router.options.ts I figured out to use hooks in nuxt.config.js and it works same as with pages:

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'slug-page',
        path: '/:slug',
        file: '~/pages/[slug].vue'
      });
    }
  }

Example: https://stackblitz.com/edit/nuxtframeworkdiscussions948-vxjwu4?file=nuxt.config.ts