ルーティングを使用して Vue で国際的な多言語切り替えを実装するにはどうすればよいですか?

ルーティングを使用して Vue で国際的な多言語切り替えを実装するにはどうすればよいですか?

多言語 Web サイトを開発する場合、重要なニーズの 1 つは、ユーザーが選択した言語に応じて Web サイトのコンテンツを切り替えられるようにすることです。 Vue.js は人気のある JavaScript フレームワークであり、Vue Router プラグインを使用することでルーティング機能を簡単に実装できます。この記事では、ルーティングを使用して Vue で国際的な多言語切り替えを実装する方法を紹介します。

まず、Vue Router プラグインをインストールする必要があります。 npm コマンドを使用してインストールできます:

npm install vue-router

インストールが完了したら、Vue Router を Vue プロジェクトに導入し、ルーティングを構成できます。 main.js ファイルでは、次のように Vue Router を導入して使用できます。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  // 其他路由配置...
]

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

export default router

次に、各言語に対応するテキスト リソース ファイルを準備する必要があります。 src ディレクトリに新しい lang フォルダーを作成し、その中に en.js や zh.js などの複数の言語ファイルを作成します。これらの言語ファイルは、対応するテキスト リソースを含むオブジェクトを公開する必要があります。

// en.js
export default {
  home: 'Home',
  about: 'About',
  contact: 'Contact'
}

// zh.js
export default {
  home: '首页',
  about: '关于我们',
  contact: '联系我们'
}

次に、Vue コンポーネントでルーティング関数と国際化関数を使用します。テキストを表示する必要がある場合、$router オブジェクトを通じて現在の言語に対応するテキストを取得できます。

<template>
  <div>
    <nav>
      <router-link :to="{ name: 'Home' }">{{ $t('home') }}</router-link>
      <router-link :to="{ name: 'About' }">{{ $t('about') }}</router-link>
      <router-link :to="{ name: 'Contact' }">{{ $t('contact') }}</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    $t(key) {
      const lang = this.$router.currentRoute.meta.lang
      return this.$options.lang[lang][key] || ''
    }
  },
  metaInfo() {
    return {
      lang: 'en'
    }
  }
}
</script>

上記のコードでは、$t## を呼び出してテキスト リソースを取得します。 ＃ 方法 。 $t メソッドは、まず $router.currentRoute.meta.lang から現在の言語を取得し、次に $options.lang から対応するテキスト リソースを取得します。物体。対応するテキストが見つからない場合は、空の文字列が返されます。

コンポーネント内の

$t メソッドとテキスト リソース オブジェクトにアクセスするには、methods 属性で $t を定義する必要があります。 Vue インスタンス メソッドの $options オブジェクトの lang プロパティを通じてテキスト リソース オブジェクトをコンポーネントに公開します。

最後に、ルーティング設定に

beforeEach フック関数を追加して、ユーザーが選択した言語に基づいて現在の言語を切り替える必要があります。

// 在router/index.js中的router配置中添加
router.beforeEach((to, from, next) => {
  const lang = to.query.lang || 'en'
  // 设置当前路由的meta信息，在组件中可以通过this.$router.currentRoute.meta.lang获取
  to.meta.lang = lang
  next()
})

上記の場合コード、

beforeEachフック関数は to.query.lang を使用して、ユーザーが選択した言語を取得します。言語が選択されていない場合は、デフォルトで英語が使用されます。言語情報は、コンポーネントで使用するために、to.meta.lang を介して現在のルートの meta 属性に保存されます。

この時点で、ルーティングを使用して Vue で国際的な多言語切り替えを実装するプロセス全体が完了しました。 Vue Router プラグインといくつかの簡単な設定を使用することで、Web サイトの多言語切り替え機能を簡単に実装できます。この記事が、Vue プロジェクトでの多言語切り替えの実装に役立つことを願っています。

以上がルーティングを使用して Vue で国際的な多言語切り替えを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。