nuxt.js - 如何在 nuxt.config 生成路由时使用 view-i18n 翻译 url 参数
问题描述
我正在为一家房地产中介做一个多语言网站项目,我使用下面的项目使翻译一切正常,最后一步是在路线生成过程中翻译动态 url 的参数
https://github.com/paulgv/nuxt-i18n-routing
但是我不知道如何在路由生成过程中使用 view-i18n,你能帮帮我吗?
这是我想使用的代码片段:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { ROUTES_ALIASES, DEFAULT_LOCALE, I18N } from '~/config'
Vue.use(VueI18n)
export default ({ app, store }) => {
app.i18n = new VueI18n({
// fallbackLocale: DEFAULT_LOCALE,
messages: I18N,
lazy: true,
langDir: 'lang/',
parsePages: false,
pages: ROUTES_ALIASES
// silentTranslationWarn: true
})
app.i18n.locale = store.state.i18n.currentLocale
app.i18n.path = (link) => {
console.log(link)
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`;
}
return `/${app.i18n.locale}/${link}`;
}
}
我想将app.i18n.t ('entitie.slug') 称为 nuxt.config.js :
generate: {
routes: function () {
let results = axios.get(process.env.BASE_URL + '/entities')
.then((response) => {
return response.data.map((entitie) => {
return {
route: '/en/myurl/' + app.i18n.t(entitie.slug)
}
})
})
}
}
解决方案
我最终选择了一个没有真正约束力的解决方案,我的翻译系统为 slugs 生成了特定的文件
import en from './lang/translations/slug/en.json'
翻译变成了简单的键/值替换
我想这样做“路线:'/en/myurl/' + en[entity.slug] ”
import en from './lang/translations/slug/en.json'
... some code
generate: {
routes: function () {
... some code
let results = axios.get(process.env.BASE_URL + '/entities')
.then((response) => {
return response.data.map((entity) => {
return {
route: '/en/myurl/' + en[entity.slug]
}
})
})
... some code
}
}
推荐阅读
- javascript - ExpressJS 中的依赖注入
- java - 如何仅使用密码在 Java 中加密字符串?
- azure-devops - Microsoft Flow 如何让 Azure Devops 连接器在查询用户时返回多个页面
- java - 服务未显示通知
- javascript - XMLHttpRequest 问题:跨源请求仅支持协议方案:http、data、chrome、chrome-extension、https
- c - 根据编译器常量用子目录编译 C
- javascript - 对具有 Object 数组的 JavaScript 数组进行排序
- c++ - 如何通过快速排序对链表中的数据进行排序?
- angular - getOne 和 getAll 与本地 Observables 缓存和远程数据库
- python - 如果 a 和 b 之间的条件满足,则更改数组中元素符号的函数