我试图通过一种方法重定向用户,当他点击特定按钮来更改应用程序的语言。
这些按钮是标准布局的一部分,项目的所有页面都是标准布局的一部分,因此URL可以根据用户所在的.vue
页面而有所不同,但按钮始终相同,这意味着重定向必须是动态的。
例如网址:
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更简单的方法吗? 欢迎所有建议。
自从我提出这个问题以来已经很长时间了,我忘记了我已经找到了一个自定义的解决方法,所以自从再次为另一个项目实现它时,我想到了最后关闭这个问题。
自从我再次搜索可能的国际化解决方案后,我发现有两种可能的(至少):
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
代替。这样就可以使用switchLocalePath
中描述的方法official documentation。虽然我还没有真正尝试过(我记得我在8个月前试过它但遇到了一些问题,但我可能用错了方法实现了它)。将很快给它另一个。
希望这对其他人有帮助