Comment changer le menu dynamique de vue en chinois

Vue est un excellent framework front-end qui peut aider les développeurs à créer facilement des applications Web de haute qualité. Parmi eux, le menu dynamique Vue est un composant très important, qui nous permet de générer dynamiquement différents éléments de menu et de gérer ces éléments de manière flexible. Dans certains scénarios, nous devons utiliser le menu dynamique Vue pour générer un menu chinois. Cet article explique comment implémenter cette fonction.

Bases du menu dynamique Vue

Dans Vue, nous pouvons utiliser Router pour générer des menus. Le routeur est un composant central de Vue qui nous permet de créer des applications d'une seule page. Le routeur peut non seulement nous aider à mettre en œuvre des fonctions telles que les sauts de page et le contrôle d'accès, mais également à générer des menus dynamiques.

Afin de générer un menu de base, nous devons utiliser le composant routeur de Vue. Ce qui suit est un exemple simple de routeur Vue pour implémenter un menu dynamique de base :

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

Dans cet exemple de routeur, nous avons défini deux pages nommées Accueil et À propos. Ces pages seront spécifiées par les routes du routeur. En appelant la méthode router.push(), nous pouvons accéder dynamiquement à ces pages.

Générer dynamiquement un menu chinois

Afin de générer un menu chinois dans Vue, nous devons apporter quelques modifications sur le routeur. Tout d'abord, nous devons présenter la bibliothèque Vue-i18n, qui est un plug-in d'internationalisation pour Vue. Vue-i18n peut nous aider à gérer du texte dans différentes langues.

Voici comment utiliser Vue-i18n dans Vue :

1. Installer Vue-i18n :

npm install vue-i18n

2. Créer une instance Vue-i18n dans Vue :

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

Dans cet exemple, nous créons une instance appelée instance Vue-i18n pour i18n. Nous définissons également l'objet messages et l'utilisons pour gérer les noms des menus chinois et anglais.

3. Utilisation de Vue-i18n dans le routeur 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

Dans cet exemple, nous avons appelé la fonction beforeEach() sur le routeur Vue et l'avons utilisée pour modifier le nom du menu du routeur. Nous utilisons localStorage pour gérer la sélection de langue actuelle. Nous avons également appelé la méthode i18n.locale pour définir la langue actuelle sur la langue locale.

De cette façon, nous pouvons facilement compléter la génération du menu chinois dans le menu dynamique Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!