NuxtN
Nuxt•2y ago
Kérunix

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


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,
          },
        })
      }
    },
  ],
})


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 ?
Was this page helpful?