반응형
i18n을 사용하여 vue-roouter에서 메타 태그 변환
내 빵 부스러기에 사용되는 메타 태그를 번역하기 위해 vue.router 안에서 i18n을 사용하는 방법을 알 수 없다.
main.js.
import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);
const i18n = Vue.i18n
import es_es from '@/assets/langs/es_es';
import en_us from '@/assets/langs/en_us';
i18n.add('es_es', es_es)
i18n.add('en_us', en_us)
i18n.set('en_us')
라우터.js
import vuexI18n from 'vuex-i18n'
Vue.use(Router)
Vue.use(vuexI18n.plugin, store)
const i18n = Vue.i18n
번역하려는 경로의 키
{
path: '/clientes/nuevo',
name: 'CustomersNew',
beforeEnter: (to, from, next) => {
Auth(to, from, next);
CheckPermission(to, from, next, "customers@add_customer");
},
component: CustomersNew,
meta: {
breadcrumb: {
title: Vue.i18n.translate('customers.title'),
links: [ "Customers", "new"]
}
}
}
어떤 템플릿에서든 사용되는 번역은 아주 잘 번역된다.
라우터에서 직접 번역을 시도하지 않고 키를 문자열로 전달하고 빵 부스러기 구성요소에서 직접 번역을 할 수 있다.
{
path: '/clientes/nuevo',
name: 'CustomersNew',
beforeEnter: (to, from, next) => {
Auth(to, from, next);
CheckPermission(to, from, next, "customers@add_customer");
},
component: CustomersNew,
meta: {
breadcrumb: {
title: "key.to.translate.as.string',
links: [ "Customers", "new"]
}
}
}
그리고 컴포넌트에서는 언제나처럼 번역한다.
참조URL: https://stackoverflow.com/questions/56120701/translate-meta-tags-in-vue-router-with-i18n
반응형
'programing' 카테고리의 다른 글
vue의 비동기식 소품 (0) | 2022.03.19 |
---|---|
v-data-table에 클릭 이벤트를 추가하는 방법 (0) | 2022.03.19 |
vue.js 2의 다른 구성 요소에서 메소드를 호출하려면 어떻게 해야 하는가? (0) | 2022.03.19 |
ReactMarkDown 내에서 JSX 렌더링 (0) | 2022.03.19 |
제공/주체 또는 Vuex? (0) | 2022.03.19 |