Language prefix in path breaks active class on g-link

[dhruvkb]

Describe the bug I have an app with two routes / and /about/ and two locales 'en' (default) and 'hi'. I am rewriting paths using the enablePathRewrite flag set to true and rewriteDefaultLanguage set to false. This yields the following 6 paths:

0. /
1. /about/
2. /en/
3. /en/about/
4. /hi/
5. /hi/about/

The active class on the g-links (which have their to prop set to '/' and '/about/') only works on the unprefixed versions (0 and 1). In all other paths, the g-links are inactive.

To Reproduce Steps to reproduce the behavior:

1. Setup 2+ routes and 2+ locales.
2. Set enablePathRewrite to true and rewriteDefaultLanguage to false
3. Visit unprefixed routes, g-links are active as expected
4. Visit prefixed routes, g-links are inactive

Expected behavior g-links should also be active on locale-prefixed URLs.

Environment (please complete the following information):

• OS: [e.g. macOS]
• NodeJS Version [e.g. v12.16.1]
• Gridsome Version Version [e.g. 0.7.0 ]
• Browser [e.g. Firefox]
• Plugin Version [e.g. 1.5.1]

Plugin configuration

{
  use: "gridsome-plugin-i18n",
    options: {
      locales: [
        'en', // English
        'hi' // Hindi
      ],
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
      defaultLocale: process.env.VUE_APP_I18N_DEFAULT_LOCALE || 'en',
      silentFallbackWarn: true, // we actually use fallback translations
      rewriteDefaultLanguage: false,
      messages: {
        en: require('./src/locales/en.json'),
        pr: require('./src/locales/hi.json')
      }
    ]
  }
}

Something I tried If I change the to prop on the g-links to $tp('to') and $tp('/about/') respectively, the active status works for routes 0, 1, 4 and 5 (but not 2 and 3, which I think is because of rewriteDefaultLanguage set to false). Is there a way to redirect 2 and 3 to 0 and 1 respectively when rewriteDefaultLanguage is set to false?

[daaru00]

Hi @dhruvkb,

thank you for reporting, and yes, you're right, it doesn't work properly. I don't have many solutions in mind right now and I have to look at the core code to understand how the active class switch is made.

[andre-m5v]

This could be related to the issue I'm having - prefixed urls seem to break $route.params, e.g.: With a template/Help.vue, accessing http://localhost:8080/help/faq retains the params { "handle": "faq" } with a prefixed url http://localhost:8080/sg/help/faq the params are {}.

I'm assuming Gridsome is using $route.params to determine active class on g-links.