Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue?

Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue?

Apabila membangunkan laman web berbilang bahasa, salah satu keperluan penting kami ialah dapat menukar kandungan laman web mengikut bahasa yang dipilih oleh pengguna. Vue.js ialah rangka kerja JavaScript yang popular Dengan menggunakan pemalam Vue Router, kami boleh melaksanakan fungsi penghalaan dengan mudah. Dalam artikel ini, saya akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue.

Pertama, kita perlu memasang pemalam Vue Router. Ia boleh dipasang melalui arahan npm:

npm install vue-router

Selepas pemasangan selesai, kami boleh memperkenalkan Vue Router ke dalam projek Vue dan mengkonfigurasi penghalaan. Dalam fail main.js, kita boleh memperkenalkan dan menggunakan Penghala Vue seperti ini:

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

Seterusnya, kita perlu menyediakan fail sumber teks yang sepadan dengan setiap bahasa. Cipta folder lang baharu dalam direktori src dan buat berbilang fail bahasa di dalamnya, seperti en.js dan zh.js. Fail bahasa ini perlu mendedahkan objek yang mengandungi sumber teks yang sepadan:

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

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

Seterusnya, gunakan fungsi penghalaan dan pengantarabangsaan dalam komponen Vue. Di mana teks perlu dipaparkan, kami boleh mendapatkan teks yang sepadan dengan bahasa semasa melalui objek $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>

Dalam kod di atas, kami memperoleh sumber teks dengan memanggil kaedah $t. Kaedah $t mula-mula mendapatkan bahasa semasa daripada $router.currentRoute.meta.lang, dan kemudian memperoleh teks yang sepadan daripada $options.lang kod> sumber objek. Jika teks yang sepadan tidak dijumpai, rentetan kosong akan dikembalikan. <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

Untuk mengakses kaedah $t dan objek sumber teks dalam komponen, kita perlu mentakrifkan kaedah $t dalam kaedah atribut contoh Vue , dan dedahkan objek sumber teks kepada komponen melalui atribut lang objek $options.

Akhir sekali, kita perlu menambah fungsi cangkuk beforeEach dalam konfigurasi penghalaan untuk menukar bahasa semasa mengikut bahasa yang dipilih oleh pengguna: 🎜rrreee🎜Dalam kod di atas, beforeEach Fungsi cangkuk menggunakan <code>to.query.lang untuk mendapatkan bahasa yang dipilih oleh pengguna Jika tiada bahasa dipilih, bahasa Inggeris digunakan secara lalai. Maklumat bahasa kemudiannya disimpan dalam atribut meta laluan semasa melalui to.meta.lang untuk digunakan dalam komponen. 🎜🎜Pada ketika ini, kami telah menyelesaikan keseluruhan proses penggunaan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue. Dengan menggunakan pemalam Vue Router dan beberapa konfigurasi mudah, kami boleh melaksanakan fungsi penukaran berbilang bahasa tapak web dengan mudah. Saya harap artikel ini akan membantu anda melaksanakan penukaran berbilang bahasa dalam projek Vue anda. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!