설정 기능 내에서 @nuxt-i18n 로케일 변경에 대응하는 방법

Nuxt v2, nuxt-i18n을 사용 중이고 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에서 테스트되었습니다. 그게 다야.