Bagaimana untuk menukar menu dinamik vue kepada bahasa Cina

Vue ialah rangka kerja bahagian hadapan yang sangat baik yang boleh membantu pembangun membina aplikasi web berkualiti tinggi dengan mudah. Antaranya, menu dinamik Vue ialah komponen yang sangat penting, yang membolehkan kami menjana item menu berbeza secara dinamik dan mengurus item ini secara fleksibel. Dalam sesetengah senario, kita perlu menggunakan menu dinamik Vue untuk menjana menu Cina Artikel ini akan memperkenalkan cara melaksanakan fungsi ini.

Asas menu dinamik Vue

Dalam Vue, kita boleh menggunakan Penghala untuk menjana menu. Penghala ialah komponen teras dalam Vue yang membolehkan kami membina aplikasi satu halaman. Penghala bukan sahaja boleh membantu kami melaksanakan fungsi seperti lompat halaman dan kawalan akses, tetapi juga menjana menu dinamik.

Untuk menjana menu asas, kita perlu menggunakan komponen penghala Vue. Berikut ialah contoh penghala Vue mudah yang digunakan untuk melaksanakan menu dinamik asas:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

Dalam contoh penghala ini, kami mentakrifkan dua halaman bernama Laman Utama dan Perihal. Halaman ini akan ditentukan oleh laluan dalam penghala. Dengan memanggil kaedah router.push(), kita boleh melompat ke halaman ini secara dinamik.

Jana menu Cina secara dinamik

Untuk menjana menu Cina dalam Vue, kami perlu membuat beberapa pengubahsuaian pada penghala. Pertama, kita perlu memperkenalkan perpustakaan Vue-i18n, yang merupakan pemalam pengantarabangsaan untuk Vue. Vue-i18n boleh membantu kami mengurus teks dalam bahasa yang berbeza.

Berikut ialah cara menggunakan Vue-i18n dalam Vue:

1. Pasang Vue-i18n:

npm install vue-i18n

2. Cipta dalam Vue Vue- Contoh i18n:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
  'en': {
    menu: {
      home: 'Home',
      about: 'About'
    }
  },
  'zh': {
    menu: {
      home: '首页',
      about: '关于我们'
    }
  }
}
const i18n = new VueI18n({
  locale: 'zh', // 语言环境
  messages: messages // 文本信息
})
export default i18n

Dalam contoh ini, kami mencipta tika Vue-i18n bernama i18n. Kami juga mentakrifkan objek mesej dan menggunakannya untuk mengurus nama menu Cina dan Inggeris.

3. Menggunakan Vue-i18n dalam penghala Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
import i18n from './i18n'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
// 修改路由器菜单名称
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  let language = localStorage.getItem('language') || 'en'
  i18n.locale = language
  next()
})
export default router

Dalam contoh ini, kami memanggil fungsi beforeEach() pada penghala Vue, gunakannya untuk Mengubah suai nama menu penghala. Kami menggunakan localStorage untuk mengurus pemilihan bahasa semasa. Kami juga memanggil kaedah i18n.locale untuk menetapkan bahasa semasa kepada bahasa tempatan.

Dengan cara ini, kita boleh melengkapkan penjanaan menu Cina dalam menu dinamik Vue dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk menukar menu dinamik vue kepada bahasa Cina. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!