vue el-breadcrumb 面包屑及面包屑国际化的实现方法和代码

Vue 的 UI 框架 Element UI 中提供了面包屑组件 el-breadcrumb，可以方便地实现面包屑导航功能。同时，Element UI 也提供了国际化的支持，可以让我们方便地实现面包屑的国际化。

以下是在 Vue 项目中使用 el-breadcrumb 组件实现面包屑导航的代码：

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{ $t('home') }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/list' }">{{ $t('list') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('detail') }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadcrumbDemo',
  data() {
    return {};
  },
};
</script>

在上面的代码中，我们使用 el-breadcrumb 组件来包含多个 el-breadcrumb-item 组件，每个 el-breadcrumb-item 组件代表一个面包屑导航项，可以通过 :to 属性设置跳转链接。

接下来，我们实现面包屑导航的国际化。在 Vue 项目中使用 Element UI 的国际化需要先引入 Element UI 的语言包，然后在 Vue 的配置选项中设置语言包和翻译函数。以下是实现面包屑导航国际化的代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'; // 引入英文语言包

Vue.use(ElementUI, { locale });

Vue.prototype.$t = function(key) {
  return this.$i18n.t(key);
};

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

在上面的代码中，我们引入了 Element UI 的英文语言包，并在 Vue 配置选项中设置语言包和翻译函数。之后，我们就可以在 el-breadcrumb-item 组件中使用 $t 函数来进行国际化翻译了。我们只需要在翻译文件中添加相应的翻译内容即可，例如：

{
  "home": "Home",
  "list": "List",
  "detail": "Detail"
}

这样，我们就成功地实现了 el-breadcrumb 面包屑及面包屑国际化功能。