时间戳

首页 > 解决方案 > 使用 Nuxt.js 和 Vue-i18n 重定向到同一页面但切换了语言 URL

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

问题描述

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

例如网址：

localhost/about


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

localhost/bg/about


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


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


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


需要的步骤：

npm install
npm run dev


能否以更好的方式完成？在这种情况下，有没有正则表达式的例子？有没有比正则表达式更简单的方法？
欢迎所有建议。

标签： regexvue.jsnuxt.jsvue-i18n

解决方案

自从我提出这个问题以来已经有很长时间了，我忘记了我已经找到了一个自定义的解决方法，所以自从再次为另一个项目实施它的时候，我想到了最终结束这个问题。

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

1）。Nuxt使用and的自定义解决方案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）。第二种解决方案是使用nuxtandnuxt-i18n代替。这种方式可以使用官方文档switchLocalePath中描述的方法。虽然我还没有真正尝试过（我记得我在 8 个月前尝试过但遇到了一些问题，我可能以错误的方式实现它）。很快就会再试一次。



希望这对其他人有帮助

推荐阅读