Vue-CLIで作ったページタイトルを言語切り替え可能にする方法

まず初めに、こちらのページを参考にしました。

その上で、前回の記事でメモをした言語切り替えによって、ページtitleを変更する方法をまとめます。

//App.vue
methods: {
    createTitleDesc: function (routeInstance) {
      //タイトルを設定
      if (routeInstance.meta.title) {
        const lang = this.$route.params.lang || 'ja'   <=====//変更点
        const setTitle = routeInstance.meta.title[lang]    <=====//変更点
        document.title = setTitle
      } else {
        //ルートでtitleがセットされていない場合に表示するテキスト
        document.title = 'title is not exist'
      }
    },
  },

これをセットできたら、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', 
        meta: { title: { ja: '日本語タイトル', en: '英語タイトル' } }//<======metaにtitle, jaとenで条件分岐させる
      },
      {
        path: 'example1',
        component: Example1,
        meta: { title: { ja: '日本語タイトル', en: '英語タイトル' } }//<======metaにtitle, jaとenで条件分岐させる
      },
      {
        path: 'example2',
        component: Example2,
        meta: { title: { ja: '日本語タイトル', en: '英語タイトル' } }//<======metaにtitle, jaとenで条件分岐させる
      },
  {
    path: '*',
    redirect: '/ja/home',
  },
 }
]

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