[javascript] Vue Router를 활용한 멀티 언어 라우팅

18 Dec 2023

javascript

Vue.js는 매우 강력한 기능을 제공하는데, 그 중 하나가 Vue Router입니다. Vue Router를 사용하면 Vue 애플리케이션의 라우팅을 쉽게 관리할 수 있으며, 멀티 언어 웹사이트를 개발하는 데 매우 유용하게 사용될 수 있습니다.

이 블로그에서는 Vue Router를 사용하여 멀티 언어 라우팅을 구현하는 방법에 대해 알아보겠습니다.

1. Vue Router 설치

먼저, Vue 프로젝트에 Vue Router를 설치합니다.

npm install vue-router

2. 라우터 구성

다국어 웹사이트를 위한 라우터를 구성합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/:lang',
    component: {
      render (c) { return c('router-view') }
    },
    children: [
      {
        path: '',
        name: 'home',
        component: Home
      },
      // Add more routes for different languages
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 언어 변경

사용자가 언어를 변경할 때마다 해당 언어에 맞는 URL로 라우팅하기 위해, 언어를 변경하는 기능을 추가합니다.

methods: {
  changeLanguage(lang) {
    this.$router.push({ path: `/${lang}${this.$route.fullPath}` })
  }
}

4. 다국어 지원 컴포넌트

다국어 지원을 위한 컴포넌트를 작성합니다.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  created() {
    this.$i18n.locale = this.$route.params.lang
  }
}
</script>

5. 다국어 지원

Vue I18n을 사용하여 다국어를 지원합니다. 다국어 지원을 위한 언어 파일을 작성하고, 언어 설정을 추가합니다.

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    hello: 'Hello!'
    // Add more translations for English
  },
  fr: {
    hello: 'Bonjour!'
    // Add more translations for French
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages
})

export default i18n

이제 Vue Router를 사용하여 멀티 언어 웹사이트를 쉽게 구현할 수 있습니다. Vue.js와 Vue Router의 강력한 기능을 활용하여 멀티 언어 지원 기능을 사용자에게 제공하세요.

더 많은 정보를 원하시면 Vue Router 공식 문서를 참고하시기 바랍니다.