


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

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

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

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,

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

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

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

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

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
