首页 文章

使用Nuxt.js和Vue-i18n重定向到同一页面但切换语言URL

提问于
浏览 次
0

我试图通过一种方法重定向用户，当他点击特定按钮来更改应用程序的语言 .
这些按钮是标准布局的一部分，项目的所有页面都是标准布局的一部分，因此URL可以根据用户所在的页面而有所不同，但按钮始终相同，这意味着重定向必须是动态的 .

例如网址：

localhost/about

应该通过该方法重定向（通过按下特定按钮）：

localhost/bg/about

在项目中，页面位于文件夹 _locale 内，并从该文件夹外的.vue文件导入，如Nuxt文档中所建议的那样，用于使用Vue-i18n进行本地化https://nuxtjs.org/examples/i18n/
以相同的方式实现 nuxt.config.js ， i18n.js 中间件， i18n.js 插件和 index.js 存储文件 .

因为它是一个 Nuxt.js 应用程序而不仅仅是一个 Vue.js ，只是通过更改 locale （该语言）的页面提交商店的变异实际上也不会改变语言，即使它确实如此（例如使用 this.$i18n.locale = 'bg' ）只更改它为特定页面，并使用下一个导航它再次使用 fallback locale ，所以我试图通过重定向解决它，然后使用基于URL的语言的正确 .json 文件 . 我只是想找到一种方法让这种重定向更加动态，而不是只回到每种语言的 home 页面 .

如果需要github repo：https://github.com/alexgil1994/logistics-gls

需要的步骤：

npm install
npm run dev

可以用更好的方式完成吗？对于这种情况，有没有Regex的例子？有比Regex更简单的方法吗？
欢迎所有建议 .

regex vue.js nuxt.js vue-i18n

1 回答

  • 1

    自从我提出这个问题以来已经很长时间了，我忘记了我已经找到了一个自定义的解决方法，所以自从再次为另一个项目实现它时，我想到了最后关闭这个问题 .

    自从我再次搜索可能的国际化解决方案后，我发现有两种可能的（至少）：

    1). 使用 Nuxt 和 vue-i18n 的自定义解决方案是使用用户在选择以下语言选项时触发的方法：

    changeLanguage(locale) {
          // -- Getting the path before starting
          var beforePath = this.$nuxt.$router.history.current.path

          // -- Removing the previous locale from the url
          var result = ''
          result = beforePath.replace( "/bg", "" )
          result = result.replace( "/gr", "" )

          // -- Redirecting to the same page but in the desired language
          if ( locale == 'gr' || locale == 'bg' ) {
            this.$nuxt.$router.replace({ path: '/' + locale + result })
          } else {
            if ( result == '/' ) {
              this.$nuxt.$router.replace({ path: '/' + locale })
            } else {
              this.$nuxt.$router.replace({ path: '/' + locale + result })
            }
          }
      }

    您可以看到我传入的 locale 参数是选择的语言代码，我们使用 $nuxt.$router 来获取当前路径 .

    2). 第二种解决方案是使用 nuxt 和 nuxt-i18n 代替 . 这样就可以使用official documentation中描述的方法 switchLocalePath . 虽然我还没有真正尝试过（我记得我在8个月前试过它但遇到了一些问题，但我可能用错了方法实现了它） . 将很快给它另一个 .

    希望这对其他人有帮助

    回复于

相关问题