Matched error when navigate using dynamic pages at same folder level

[ajmasia]

Version

nuxt-i18n: 6.15.1
nuxt: 2.14.0

Nuxt configuration

mode:

• universal
• [] spa

Nuxt-i18n configuration

i18n: {
    strategy: 'no_prefix',
    locales: [
      {
        code: 'es',
        iso: 'es-ES',
        file: 'es-ES.js',
        name: 'Español',
        domain: 'https://mydomain.com',
      },
      // {
      //   code: 'en',
      //   iso: 'en-US',
      //   file: 'en-US.js',
      //   name: 'English',
      //   domain: 'https://en.mydomain.com',
      // },
    ],
    vueI18n: {
      fallbackLocale: 'es',
    },
    defaultLocale: 'es',
    noPrefixDefaultLocale: true,
    parsePages: false,
    detectBrowserLanguage: false,
    seo: true,
    lazy: true,
    langDir: 'i18n/',
  },

Reproduction Link

https://codesandbox.io/s/suspicious-night-zbhxz?file=/pages/blog/index.vue

Steps to reproduce

I have two dynamic routes nested in the blog route. One of them shows the posts detail _slug.vue and the other shows a list of posts related to a category _category.vue. When I access to the detail of a post from the path _category.vue. instead of using the path blog-name keep using` blog-category '.

Both routes use the same PostCard component, that redirects to the _slug.vue page:

<NuxtLink
    :to="
      localePath({
        name: 'blog-slug',
        params: { slug: post.slug },
      })
    "
  >

But it doesn't redirect well. It does this using the path _category.vue:

That is my current pages:

What is Expected?

When navigating from http://localhost:8000/blog/page/1 to detail post, should navigate to http://localhost:8000/blog/post-slug using _slug.vueinstead of_category.vue`

What is actually happening?

Navigating always using _category.vue

Note: Using NuxtLink whiteout localePath, works fine!

[rchl]

I'd ask you to make a repro project (either a repo or on codesanbox).

[ajmasia]

Hi @rchl, here you have a codesanbox example.

Using the localePath method, if you try to navigate to post detail, always use the category dynamic route.

If you do not use the localePath work fine in dev mode. In production, it doesn't work either.

what could be happening?

Thanks for your patient wait 😄

[rchl]

I'm seeing this in my forked codesanbox where I haven't made any changes:

It looks to me like this is how it's supposed to work? Why I'm not seeing the issue?

[ajmasia]

If you navigate to a post from the blog or categories pages you should see the post detail through the _slug/index.vue component

If you remove all localePath methods work fine!

I've updated the codesanbox repo: https://codesandbox.io/s/suspicious-night-zbhxz?file=/pages/blog/index.vue

[rchl]

I can see that result in both cases...

Reloading the post page fails to show the extra detail though so I think you have a more fundamental problem.
Reloading the page triggers server-side rendering so you might be hiting problems related to that when doing client-side navigation.

[rchl]

I mean, If you want to support server-side requests (which you should) then I think that this directory structure is not a proper solution since Vue Router won't know which route to pick based on the URL path itself. So you can make client-side navigations work but that is only half of the solution.

Anyways, localePath just generates an URL so it's functionally equivalent to specifying a route path to navigate to manually. You can just compare what you get by using localePath and if it's the same as the one you are saying is working, then it should work exactly the same. If it's different, then let me know what it is and I can then try to see what the issue issue is.

[ajmasia]

I updated the routes structure, and works fine!

Now I can navigate to the post details using these path year/month/_slug, categories category and tags tag/_tag and blog pages page/_number to show the post list

Thanks for your help!

[rchl]

It still looks to me like server side rendering won't be able to differentiate between category and year/month/slug routes but at least it's not a nuxt-i18n issue.