Rumah hujung hadapan web View.js Bagaimana untuk menggunakan penghalaan untuk melaksanakan penukaran berbilang bahasa antarabangsa dalam Vue?

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

Jul 22, 2023 pm 12:17 PM
pengantarabangsaan penghalaan vue Penukaran berbilang bahasa

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
Salin selepas log masuk

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
Salin selepas log masuk

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: '联系我们'
}
Salin selepas log masuk

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>
Salin selepas log masuk

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()
})
Salin selepas log masuk

在上面的代码中,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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pembangunan PHP: Melaksanakan fungsi penukaran berbilang bahasa yang mudah Panduan Pembangunan PHP: Melaksanakan fungsi penukaran berbilang bahasa yang mudah Jul 01, 2023 pm 08:58 PM

Panduan Pembangunan PHP: Melaksanakan Fungsi Penukaran Pelbagai Bahasa Mudah Pengenalan: Dengan pembangunan Internet, semakin banyak laman web dan aplikasi perlu menyokong fungsi berbilang bahasa. Dalam pembangunan web, melaksanakan fungsi penukaran berbilang bahasa adalah tugas yang sangat penting. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi penukaran berbilang bahasa yang mudah dan menyediakan contoh kod untuk dirujuk oleh pembangun. 1. Kerja-kerja penyediaan Sebelum mula melaksanakan fungsi penukaran pelbagai bahasa, kita perlu melakukan beberapa kerja penyediaan. Pertama, kita perlu menentukan bahasa yang disokong dan mencipta bahasa yang sepadan

Gunakan rangka kerja Gin untuk melaksanakan pengantarabangsaan dan fungsi sokongan berbilang bahasa Gunakan rangka kerja Gin untuk melaksanakan pengantarabangsaan dan fungsi sokongan berbilang bahasa Jun 23, 2023 am 11:07 AM

Dengan perkembangan globalisasi dan populariti Internet, semakin banyak laman web dan aplikasi telah mula berusaha untuk mencapai pengantarabangsaan dan fungsi sokongan berbilang bahasa untuk memenuhi keperluan kumpulan orang yang berbeza. Untuk merealisasikan fungsi ini, pembangun perlu menggunakan beberapa teknologi dan rangka kerja termaju. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Gin untuk melaksanakan pengantarabangsaan dan keupayaan sokongan berbilang bahasa. Rangka kerja Gin ialah rangka kerja web ringan yang ditulis dalam bahasa Go. Ia cekap, mudah digunakan dan fleksibel, dan telah menjadi rangka kerja pilihan bagi banyak pembangun. selain itu,

Bitcoin Perpetual Contract Platform Perisian BTC Perpetual Contract Trading Platform Bitcoin Perpetual Contract Platform Perisian BTC Perpetual Contract Trading Platform Feb 03, 2024 am 08:57 AM

Perisian platform kontrak kekal Bitcoin termasuk binance, CryptoGro, UniswapV3, Bit pro, AMGEX, dYdX, PKEX, sistem mata wang, BearBit dan Deepcoin. Pengenalan berkaitan setiap platform adalah seperti berikut, rakan-rakan yang berminat boleh lihat. Senarai lengkap pertukaran kontrak kekal BTC 1. Binance: Ramai pelabur biasa dan menggunakan pertukaran laman web rasmi Binance. Ditubuhkan pada 2013, laman web rasmi Binance menyediakan perkhidmatan seperti perdagangan mata wang fiat, perdagangan mata wang-ke-kripto dan perdagangan kontrak. Selepas 8 tahun pembangunan, laman web rasmi Binance masih kekal di antara sepuluh pertukaran mata wang maya teratas, membuktikan kekuatan berterusannya dalam bidang perdagangan blockchain. 2. CryptoG

Bina aplikasi web antarabangsa menggunakan rangka kerja FastAPI Bina aplikasi web antarabangsa menggunakan rangka kerja FastAPI Sep 29, 2023 pm 03:53 PM

Gunakan rangka kerja FastAPI untuk membina aplikasi Web antarabangsa FastAPI ialah rangka kerja Web Python berprestasi tinggi yang menggabungkan anotasi jenis Python dan sokongan tak segerak berprestasi tinggi untuk menjadikan pembangunan aplikasi Web lebih mudah, lebih pantas dan lebih dipercayai. Apabila membina aplikasi Web antarabangsa, FastAPI menyediakan alatan dan konsep yang mudah yang boleh menjadikan aplikasi menyokong berbilang bahasa dengan mudah. Di bawah saya akan memberikan contoh kod khusus untuk memperkenalkan cara menggunakan rangka kerja FastAPI untuk membina

Penukaran berbilang bahasa ThinkPHP6: merealisasikan aplikasi antarabangsa Penukaran berbilang bahasa ThinkPHP6: merealisasikan aplikasi antarabangsa Aug 25, 2023 pm 08:31 PM

Pensuisan berbilang bahasa ThinkPHP6: merealisasikan aplikasi antarabangsa Dengan perkembangan pesat Internet dan proses globalisasi, semakin banyak laman web dan aplikasi perlu menyokong fungsi berbilang bahasa untuk memenuhi keperluan pengguna di negara dan wilayah yang berbeza. Apabila menggunakan ThinkPHP6 untuk membangunkan aplikasi web, mencapai penukaran berbilang bahasa ialah tugas penting Artikel ini akan memperkenalkan cara melaksanakan aplikasi antarabangsa dalam ThinkPHP6 untuk menyediakan pengguna dengan pengalaman berbilang bahasa yang mudah. Mengapa anda memerlukan penukaran berbilang bahasa? Dalam konteks globalisasi, pengguna menggunakan Internet

Perpustakaan pengantarabangsaan dalam PHP8.0 Perpustakaan pengantarabangsaan dalam PHP8.0 May 14, 2023 pm 05:51 PM

Perpustakaan pengantarabangsaan dalam PHP8.0: Sambungan UnicodeCLDR dan Intl Dengan proses globalisasi, pembangunan aplikasi merentas bahasa dan merentas wilayah telah menjadi semakin biasa. Pengantarabangsaan adalah bahagian penting dalam mencapai matlamat ini. Dalam PHP8.0, sambungan UnicodeCLDR dan Intl telah diperkenalkan, kedua-duanya menyediakan pembangun dengan sokongan pengantarabangsaan yang lebih baik. UnicodeCLDRUnicodeCLDR(CommonLocaleDat

Bagaimana untuk menggunakan rangka kerja Webman untuk mencapai pengantarabangsaan dan sokongan berbilang bahasa? Bagaimana untuk menggunakan rangka kerja Webman untuk mencapai pengantarabangsaan dan sokongan berbilang bahasa? Jul 09, 2023 pm 03:51 PM

Kini, dengan perkembangan teknologi Internet yang berterusan, semakin banyak laman web dan aplikasi perlu menyokong pelbagai bahasa dan pengantarabangsaan. Dalam pembangunan web, menggunakan rangka kerja boleh memudahkan proses pembangunan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Webman untuk mencapai pengantarabangsaan dan sokongan berbilang bahasa, dan menyediakan beberapa contoh kod. 1. Apakah rangka kerja Webman? Webman ialah rangka kerja berasaskan PHP ringan yang menyediakan fungsi yang kaya dan alatan yang mudah digunakan untuk membangunkan aplikasi web. Salah satunya ialah pengantarabangsaan dan pelbagai

Penggunaan papan kekunci komputer riba dan fungsi kekunci Penggunaan papan kekunci komputer riba dan fungsi kekunci Mar 21, 2024 am 09:40 AM

Apakah fungsi papan kekunci komputer riba 1. F1: Jika anda berada dalam program yang dipilih dan memerlukan bantuan, tekan F1. Selain itu, ia juga boleh dilaraskan untuk membisukan. F2: Jika fail atau folder dipilih dalam explorer, menekan F2 akan menamakan semula fail atau folder yang dipilih. Anda juga boleh menurunkan kelantangan. 2. Papan kekunci dibahagikan kepada empat kawasan: kawasan kekunci fungsi, kawasan papan kekunci utama, kawasan penunjuk status dan kawasan kekunci kawalan. Kekunci untuk huruf individu pada papan kekunci digunakan untuk menaip. Kekunci shift dan ctrl ialah dua kekunci dalam bulatan merah yang melaraskan kekunci Pinyin apabila ditekan pada masa yang sama. Apabila anda menekannya pada masa yang sama ia akan muncul: Pinyin, Abjad, Pen Lima Aksara. 3. Kawasan kekunci paling banyak di tengah papan kekunci, termasuk kekunci angka, kekunci huruf dan kekunci simbol, kawalan

See all articles