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

实现动态面包屑：

1. 在路由中定义每个路由对应的面包屑信息，可以在 `meta` 属性中添加 `breadcrumb` 字段，该字段的值可以是一个字符串或者一个函数，用于生成面包屑的文本内容。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      breadcrumb: '首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      breadcrumb: '关于我们'
    }
  },
  {
    path: '/products/:id',
    name: 'Product',
    component: Product,
    props: true,
    meta: {
      breadcrumb: (route) => `产品${route.params.id}`
    }
  }
]

2. 在 `App.vue` 中引入 `el-breadcrumb` 组件，并在 `created` 生命周期中获取当前路由的面包屑信息，并将其存储在一个数组中。

<template>
  <div id="app">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      breadcrumbs: []
    }
  },
  created() {
    this.updateBreadcrumbs()
  },
  watch: {
    $route() {
      this.updateBreadcrumbs()
    }
  },
  methods: {
    updateBreadcrumbs() {
      const matched = this.$route.matched
      const breadcrumbs = []
      for (let i = 0; i < matched.length; i++) {
        const meta = matched[i].meta
        if (meta.breadcrumb) {
          const breadcrumb = typeof meta.breadcrumb === 'function' ? meta.breadcrumb(matched[i]) : meta.breadcrumb
          breadcrumbs.push(breadcrumb)
        }
      }
      this.breadcrumbs = breadcrumbs
    }
  }
}
</script>

实现面包屑国际化：

1. 在 `src` 目录下创建一个 `locales` 目录，用于存放不同语言的翻译文件。

2. 在 `main.js` 中引入 `VueI18n` 库，并将其挂载到全局变量上。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': require('./locales/zh-CN.json'),
    'en-US': require('./locales/en-US.json')
  }
})

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

3. 在 `locales` 目录下创建 `zh-CN.json` 和 `en-US.json` 文件，分别存放中文和英文的翻译内容。

// zh-CN.json
{
  "home": "首页",
  "about": "关于我们",
  "product": "产品{{id}}"
}

// en-US.json
{
  "home": "Home",
  "about": "About Us",
  "product": "Product {{id}}"
}

4. 在路由的 `meta` 属性中添加 `breadcrumbKey` 字段，用于指定面包屑的翻译键名。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      breadcrumbKey: 'home'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      breadcrumbKey: 'about'
    }
  },
  {
    path: '/products/:id',
    name: 'Product',
    component: Product,
    props: true,
    meta: {
      breadcrumbKey: 'product'
    }
  }
]

5. 修改 `App.vue` 中的 `updateBreadcrumbs` 方法，使用 `$t` 方法从翻译文件中获取面包屑文本内容。

methods: {
  updateBreadcrumbs() {
    const matched = this.$route.matched
    const breadcrumbs = []
    for (let i = 0; i < matched.length; i++) {
      const meta = matched[i].meta
      if (meta.breadcrumbKey) {
        const key = meta.breadcrumbKey
        const params = matched[i].params
        const breadcrumb = this.$t(key, params)
        breadcrumbs.push(breadcrumb)
      }
    }
    this.breadcrumbs = breadcrumbs
  }
}

6. 在模板中使用 `$t` 方法渲染面包屑文本内容。

<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">{{ $t(item) }}</el-breadcrumb-item>