programing

i18n을 사용하여 vue-roouter에서 메타 태그 변환

prostudy 2022. 3. 19. 12:43
반응형

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

반응형