Nuxt•9mo ago

How to have a different "default" page in nested routing

Hey there ! I'm facing an issue related to nested routing. Using the following folder structure:

├── providers
│   └── [provider]
│       ├── domains
│       │   ├── [domain]
│       │   │   ├── general-informations.vue
│       │   │   ├── index.vue
│       │   │   └── localisation.vue
│       │   └── [domain].vue
│       ├── domains.vue
│       └── home.vue
└── providers.vue

├── providers
│   └── [provider]
│       ├── domains
│       │   ├── [domain]
│       │   │   ├── general-informations.vue
│       │   │   ├── index.vue
│       │   │   └── localisation.vue
│       │   └── [domain].vue
│       ├── domains.vue
│       └── home.vue
└── providers.vue

I would like the route under providers/[provider]/domains/[domain]/ to be set by default to providers/[provider]/domains/[domain]/general-information because my UI does not need an "index" page for the details of a domain and the "default" page when navigating to /providers/1/domains/1 should be /providers/1/domains/1/general-informations. I'm using Nuxt i18n with a prefix_and_default stategy, so I can't setup an alias in general-informations.vue using definePageMeta because I can't access the local in a simple way there. I'va also tried setting up a middleware in index.vue like this :

definePageMeta({
  middleware: [
    async function (to) {
      const { $getRouteBaseName } = useNuxtApp()
      if ($getRouteBaseName(to) === 'providers-provider-domains-domain') {
        // Custom helper to abstract i18n route navigation, nothing to do with the              // issue at hand
        await navigateToLocalePath({
          name: 'providers-provider-domains-domain-general-informations',
          params: {
            provider: 1,
            domain: 1,
          },
        })
      }
    },
  ],
})

definePageMeta({
  middleware: [
    async function (to) {
      const { $getRouteBaseName } = useNuxtApp()
      if ($getRouteBaseName(to) === 'providers-provider-domains-domain') {
        // Custom helper to abstract i18n route navigation, nothing to do with the              // issue at hand
        await navigateToLocalePath({
          name: 'providers-provider-domains-domain-general-informations',
          params: {
            provider: 1,
            domain: 1,
          },
        })
      }
    },
  ],
})

But, even if I can successfully log a message inside my if statement, the redirection does not happen (which is weird since the same call in something like onMounted works). Do you have any idea of how I could make it work ?

9 Replies

Sandvich•9mo ago

if you can log a message inside the if then surely it's an issue with navigateToLocalePath right? Try with a normal navigateTo and see if that works

KérunixOP•9mo ago

Yeah I tried that already, didn't work 😅 (I had no doubt it woudln't, since navigateToLocalePath is working as intended in other middlewares in the same application)

Sandvich•9mo ago

try a non async function and instead of awaiting, return navigateTo() ?

KérunixOP•9mo ago

Ooooh that might work Yeah that did it, can't believe I didn't think of it. Thanks a lot for the help !

Single•9mo ago

You could also redirect using:

definePageMeta({
  redirect: 'providers-provider-domains-domain-general-informations'
})

definePageMeta({
  redirect: 'providers-provider-domains-domain-general-informations'
})

in your index.vue (providers-provider-domains-domain)

Sandvich•9mo ago

oh that's nice didn't know about that

KérunixOP•9mo ago

Neither did I and its quite nice !

Single•9mo ago

Be aware that both routes will render, thus analytics for example will be triggered for both.

devmadhavv•9mo ago

thanks, it helped

Gaming

Programming

How to have a different "default" page in nested routing