Vue.js プログラミング cynthiadayo

Vue.js(vue-cli)でi18nライブラリを使わずに言語切り替えをする方法

ページ内で言語切り替えボタンを設置し、日本語⇄英語のようにする方法をメモをしておきます。

まずは、src/views/Lang.vueファイルを準備します。

//src/views/Lang.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  watch: {
    $route(route) {
      switch (route.params.lang) {
        case 'ja':  <===== 日本語
        case 'en':　<===== 英語       //他の言語を追加するのは自由
          break
        default:
          this.$router.replace({ path: '/ja/home' })      //デフォルトは日本語
      }
    },
  },
}
</script>

次に、vue-routerをインストールし、src/router/index.jsファイルに以下を記述します。

//src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Lang from '@/views/Lang.vue'
import Home from '@/views/Home.vue'
import Example1 from '@/views/Example1.vue'
import Example2 from '@/views/Example2.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/:lang',
    component: Lang,
    children: [
      {
        path: '',
        redirect: 'home',  //<========　リダイレクトはホーム画面などが良い
      },
      {
        path: 'example1',
        component: Example1,
      },
      {
        path: 'example2',
        component: Example2,
      },
  {
    path: '*',
    redirect: '/ja/home',
  },
 }
]

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

export default router

これによって、言語切り替えボタンを設置し、日本語⇄英語のように柔軟に対応することができるようになります。

以下はVuetifyによって実装したサンプルです。

<v-tabs>
 　　<v-tab><router-link to="home">Home</router-link></v-tab>
   <v-tab>
    　　<v-icon>mdi-web</v-icon>
      <template v-if="$route.params.lang == 'ja'">      <====== /ja/~~~のときに表示される
      　　<router-link :to="en">ja</router-link>　　　　　　　　　　　　　　　<======クリックしたら/en/~~~になる
      </template>
      <template v-if="$route.params.lang == 'en'">　　　　<====== /en/~~~のときに表示される
      　　<router-link :to="ja">en</router-link>               <======クリックしたら/ja/~~~になる
      </template>
    </v-tab>
</v-tabs>

言語切り替えのボタンが設置できたら、コンテンツ内の文章やイメージ画像などにも適応させることが可能になります。

<template v-if="$route.params.lang == 'ja'">サンプル</template>
<template v-if="$route.params.lang == 'en'">sample</template>
TOP