Vue 동적 메뉴를 중국어로 변경하는 방법

Vue는 개발자가 고품질 웹 애플리케이션을 쉽게 구축하는 데 도움이 되는 뛰어난 프런트 엔드 프레임워크입니다. 그중 Vue 동적 메뉴는 다양한 메뉴 항목을 동적으로 생성하고 이러한 항목을 유연하게 관리할 수 있게 해주는 매우 중요한 구성 요소입니다. 일부 시나리오에서는 Vue 동적 메뉴를 사용하여 중국어 메뉴를 생성해야 합니다. 이 기사에서는 이 기능을 구현하는 방법을 소개합니다.

Vue 동적 메뉴의 기본

Vue에서는 Router를 사용하여 메뉴를 생성할 수 있습니다. Router는 단일 페이지 애플리케이션을 구축할 수 있게 해주는 Vue의 핵심 구성 요소입니다. 라우터는 페이지 이동 및 액세스 제어와 같은 기능을 구현하는 데 도움을 줄 뿐만 아니라 동적 메뉴를 생성하는 데도 도움이 됩니다.

기본 메뉴를 생성하려면 Vue의 라우터 구성 요소를 사용해야 합니다. 다음은 기본 동적 메뉴를 구현하기 위한 간단한 Vue 라우터 예제입니다.

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

이 라우터 예제에서는 Home과 About이라는 두 페이지를 정의했습니다. 이 페이지는 라우터의 경로에 의해 지정됩니다. router.push() 메서드를 호출하면 이러한 페이지로 동적으로 이동할 수 있습니다.

중국어 메뉴를 동적으로 생성

Vue에서 중국어 메뉴를 생성하려면 라우터에서 일부 수정이 필요합니다. 먼저 Vue용 국제화 플러그인인 Vue-i18n 라이브러리를 소개해야 합니다. Vue-i18n은 다양한 언어로 된 텍스트를 관리하는 데 도움이 됩니다.

Vue에서 Vue-i18n을 사용하는 방법은 다음과 같습니다.

1. Vue-i18n 설치:

npm install vue-i18n

2. Vue에서 Vue-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

이 예에서는 Vue-i18n 인스턴스라는 인스턴스를 만듭니다. i18n의 경우. 또한 메시지 객체를 정의하고 이를 사용하여 중국어 및 영어 메뉴의 이름을 관리합니다.

3. Vue 라우터에서 Vue-i18n 사용:

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

이 예에서는 Vue 라우터에서 beforeEach() 함수를 호출하고 이를 사용하여 라우터 메뉴 이름을 수정했습니다. 현재 언어 선택을 관리하기 위해 localStorage를 사용합니다. 또한 i18n.locale 메서드를 호출하여 현재 언어를 현지 언어로 설정했습니다.

이런 식으로 Vue 동적 메뉴에서 중국어 메뉴 생성을 쉽게 완료할 수 있습니다.

위 내용은 Vue 동적 메뉴를 중국어로 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!