vue el-breadcrumb 如何使用i18n实现 动态面包屑 国际化

实现 Vue el-breadcrumb 动态面包屑的国际化，可以通过以下步骤实现：

1. 在 main.js 中引入 i18n，设置语言包。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueI18n)
Vue.use(ElementUI)

const messages = {
  en: {
    breadcrumb: {
      home: 'Home',
      page1: 'Page 1',
      page2: 'Page 2',
      page3: 'Page 3',
    }
  },
  zh: {
    breadcrumb: {
      home: '首页',
      page1: '页面1',
      page2: '页面2',
      page3: '页面3',
    }
  }
}

const i18n = new VueI18n({
  locale: 'zh', // 设置语言环境
  messages, // 设置语言包
})

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

2. 在组件中使用 el-breadcrumb。

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{ $t('breadcrumb.home') }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/page1' }">{{ $t('breadcrumb.page1') }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/page2' }">{{ $t('breadcrumb.page2') }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/page3' }">{{ $t('breadcrumb.page3') }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

在 el-breadcrumb-item 中使用 `$t` 方法获取语言包中对应的文本，实现动态面包屑的国际化。