설정 기능 내에서 @nuxt-i18n 로케일 변경에 대응하는 방법
4242 단어 nuxti18nhackscompositionapinuxt
setup
함수 내부의 i18n 객체 변경, 예를 들어 언어 변경에 반응하려는 경우 이 블로그에서 그 방법을 알려줄 것입니다.또한 이 다른 .
예를 들어 다른 사이트를 가리키는 특수 URL을 만들고 싶지만 링크에서 사용자의 현재 언어를 유지하고 싶다고 가정해 보겠습니다.
setup(props, ctx) {
// all the stuff is in the root
const { root } = ctx;
const mapedURL = ref("");
const baseUrl = "https://my.other-site.com";
function setUrl() {
const isInSpanish = ctx.root.$i18n.localeProperties.code == "es";
if (isInSpanish) {
mapedURL.value = baseUrl;
} else {
mapedURL.value = baseUrl + "/en/";
}
}
function triggerWatch() {
// keep traking on language changes when page loads
// hint: this dosen't work in edge properties like *.localeProperties.code
watch(ctx.root.$i18n.localeProperties, (newV, oldV) => {
setUrl();
});
}
// init when page loads
onMounted(() => {
// this watch will brake in the server so ignore there
if (!process.client) {
return;
}
setUrl();
triggerWatch();
});
return {
mapedURL
}
}
Nuxt v2 및 nuxt-i18n v7에서 테스트되었습니다. 그게 다야.
Reference
이 문제에 관하여(설정 기능 내에서 @nuxt-i18n 로케일 변경에 대응하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/d4g0/how-to-react-to-nuxt-i18n-locale-changes-inside-the-setup-function-1n21텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)