Comment utiliser le routage pour implémenter la commutation multilingue internationale dans Vue ?

Comment utiliser le routage pour implémenter la commutation multilingue internationale dans Vue ?

Lors du développement d'un site Web multilingue, l'un de nos besoins importants est de pouvoir changer le contenu du site Web en fonction de la langue sélectionnée par l'utilisateur. Vue.js est un framework JavaScript populaire. En utilisant le plug-in Vue Router, nous pouvons facilement implémenter des fonctions de routage. Dans cet article, je vais vous présenter comment utiliser le routage pour implémenter la commutation multilingue internationale dans Vue.

Tout d'abord, nous devons installer le plugin Vue Router. Il peut être installé via la commande npm :

npm install vue-router

Une fois l'installation terminée, nous pouvons introduire Vue Router dans le projet Vue et configurer le routage. Dans le fichier main.js, nous pouvons introduire et utiliser Vue Router comme ceci :

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

Ensuite, nous devons préparer les fichiers de ressources texte correspondant à chaque langue. Créez un nouveau dossier lang dans le répertoire src et créez-y plusieurs fichiers de langue, tels que en.js et zh.js. Ces fichiers de langue doivent exposer un objet qui contient la ressource texte correspondante :

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

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

Ensuite, utilisez les fonctions de routage et d'internationalisation dans le composant Vue. Là où du texte doit être affiché, nous pouvons obtenir le texte correspondant à la langue actuelle via l'objet $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>

Dans le code ci-dessus, nous obtenons la ressource texte en appelant la méthode $t. La méthode $t obtient d'abord la langue actuelle à partir de $router.currentRoute.meta.lang, puis obtient le texte correspondant à partir de $options.lang</ code> ressource objet. Si le texte correspondant n'est pas trouvé, une chaîne vide sera renvoyée. <code>$t方法来获取文本资源。$t方法首先从$router.currentRoute.meta.lang获取当前语言，然后从$options.lang对象中获取对应的文本资源。如果找不到对应的文本，将返回空字符串。

为了能够在组件中访问$t方法和文本资源对象，我们需要在Vue实例的methods属性中定义$t方法，并通过$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

Afin d'accéder à la méthode $t et à l'objet ressource texte dans le composant, nous devons définir la méthode $t dans les méthodes de l'instance Vue et exposez l'objet ressource texte au composant via l'attribut lang de l'objet $options.

Enfin, nous devons ajouter une fonction hook beforeEach dans la configuration du routage pour changer la langue actuelle en fonction de la langue sélectionnée par l'utilisateur : 🎜rrreee🎜Dans le code ci-dessus, beforeEach La fonction hook utilise <code>to.query.lang pour obtenir la langue sélectionnée par l'utilisateur. Si aucune langue n'est sélectionnée, l'anglais est utilisé par défaut. Les informations de langue sont ensuite stockées dans l'attribut meta de l'itinéraire actuel via to.meta.lang pour être utilisées dans le composant. 🎜🎜À ce stade, nous avons terminé tout le processus d'utilisation du routage pour implémenter la commutation multilingue internationale dans Vue. En utilisant le plug-in Vue Router et quelques configurations simples, nous pouvons facilement implémenter la fonction de commutation multilingue du site Web. J'espère que cet article vous aidera à implémenter la commutation multilingue dans votre projet Vue. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!