Wie verwende ich Routing, um die internationale Mehrsprachenumschaltung in Vue zu implementieren?

Wie verwende ich Routing, um die internationale Mehrsprachenumschaltung in Vue zu implementieren?

Bei der Entwicklung einer mehrsprachigen Website ist es eine unserer wichtigsten Anforderungen, den Website-Inhalt entsprechend der vom Benutzer ausgewählten Sprache wechseln zu können. Vue.js ist ein beliebtes JavaScript-Framework, mit dem wir Routing-Funktionen einfach implementieren können. In diesem Artikel werde ich vorstellen, wie man mithilfe von Routing die internationale Mehrsprachenumschaltung in Vue implementiert.

Zuerst müssen wir das Vue Router-Plugin installieren. Es kann über den npm-Befehl installiert werden:

npm install vue-router

Nach Abschluss der Installation können wir Vue Router in das Vue-Projekt einführen und das Routing konfigurieren. In der Datei main.js können wir Vue Router wie folgt einführen und verwenden:

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

Als nächstes müssen wir die Textressourcendateien für jede Sprache vorbereiten. Erstellen Sie einen neuen Lang-Ordner im src-Verzeichnis und erstellen Sie darin mehrere Sprachdateien, z. B. en.js und zh.js. Diese Sprachdateien müssen ein Objekt verfügbar machen, das die entsprechende Textressource enthält:

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

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

Als nächstes verwenden Sie Routing- und Internationalisierungsfunktionen in der Vue-Komponente. Wo Text angezeigt werden muss, können wir den der aktuellen Sprache entsprechenden Text über das $router-Objekt abrufen:

<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>

Im obigen Code erhalten wir die Textressource durch Aufrufen der Methode $t. Die $t-Methode ruft zunächst die aktuelle Sprache von $router.currentRoute.meta.lang ab und ruft dann den entsprechenden Text von $options.lang</ ab. Code> Objektressource. Wenn der entsprechende Text nicht gefunden wird, wird ein leerer String zurückgegeben. <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

Um auf die $t-Methode und das Textressourcenobjekt in der Komponente zuzugreifen, müssen wir die $t-Methode in den methods definieren Attribut der Vue-Instanz und stellen Sie der Komponente das Textressourcenobjekt über das Attribut lang des Objekts $options zur Verfügung.

Schließlich müssen wir eine beforeEach-Hook-Funktion in der Routing-Konfiguration hinzufügen, um die aktuelle Sprache entsprechend der vom Benutzer ausgewählten Sprache umzuschalten: 🎜rrreee🎜Im obigen Code beforeEach Die Hook-Funktion verwendet <code>to.query.lang, um die vom Benutzer ausgewählte Sprache abzurufen. Wenn keine Sprache ausgewählt ist, wird standardmäßig Englisch verwendet. Die Sprachinformationen werden dann im meta-Attribut der aktuellen Route über to.meta.lang zur Verwendung in der Komponente gespeichert. 🎜🎜Zu diesem Zeitpunkt haben wir den gesamten Prozess der Verwendung von Routing zur Implementierung der internationalen Mehrsprachenumschaltung in Vue abgeschlossen. Durch die Verwendung des Vue Router-Plug-Ins und einiger einfacher Konfigurationen können wir die mehrsprachige Umschaltfunktion der Website problemlos implementieren. Ich hoffe, dieser Artikel hilft Ihnen bei der Implementierung der Mehrsprachenumschaltung in Ihrem Vue-Projekt. 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich Routing, um die internationale Mehrsprachenumschaltung in Vue zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!