Can't access index route of sub router

[kleinpetr]

Hello,

I am facing another issue with the sub-router where it seems it can't resolve the index route of the sub-router. When I visit the index router I am just getting this in the console

I was trying to reproduce it in a test repository, but I am not able to reproduce it, even though in the example seems to be another issue, where the sub route navigation resets the URL prefix. (https://stackblitz.com/github/kleinpetr/nuxt-content-i18n_micro)

In the project where we are facing the issue with index sub routes it's very complex, uses more than 10 layers and it's a bit heavy so it's probably not reproducible, so let me know if you have any idea where the problem might be :pray:

Thank you

[kleinpetr]

I already found the issue, it happens when there is missing one of the index.vue in the sub directory, I've updated the stackblitz, so now you can see that the /sub/child can't be resolved :+1:

[s00d]

hello

just add a name for the page like:

<template>
  <div>
    This is a nested child router parent<br><br>
    <NuxtPage />
  </div>
</template>

<script setup>
definePageMeta({
  name: 'subChild',
})
</script>

[kleinpetr]

Ok, it seems to be working, but could you pls explain it a bit? :)

[s00d]

When you create a folder without an index file, the router generates routes incorrectly, without a name, which essentially breaks the entire logic. Unfortunately, I don't know why this happens—it's something that would need to be addressed by the router developers. You can observe this issue in DevTools, for instance.

In such cases, I create an index file with a redirect like this:

<script setup lang="ts">
const getLocaleRoute = useLocaleRoute();
navigateTo(getLocaleRoute({
  name: 'sub',
}), { redirectCode: 301 });
</script>

<template>
  <div />
</template>

With this approach, routing is generated correctly and nothing breaks.

[kleinpetr]

Ok, since we don't need the index itself I've solved it by using inline route rules to make a redirect

<script lang="ts" setup>
defineRouteRules({
  redirect: { to: '/profile/overview', statusCode: 301 },
})
</script>

But the second issue is also interesting, if all index.vue exists, the I18nLink resets the current locale prefix from the url, but if I use the definePageMeta just with a name, then it's being resolved well :thinking:

[s00d]

Regarding this issue, if you could provide an example, I'll try to understand what the problem is. But I suspect that we'll just need to define definePageMeta in such cases everywhere.

[kleinpetr]

Yes, you can see it in the example I sent https://stackblitz.com/github/kleinpetr/nuxt-content-i18n_micro

here is a quick screen record

https://github.com/user-attachments/assets/9c990903-02a6-41ee-8296-3048791ac2ae

[s00d]

I've released version 1.29.6, fixed the route for getting the locale (there was a double slash), and also added a warning on the page in case the name is missing. Additionally, I created an FAQ page in the documentation.

Also fixed the transition to links without a name, but this is a bad solution, it's better not to do it this way, as most of the functionality won't work. It's better to always set a name if such a problem arises.

[kleinpetr]

Thank you :blush: