vue 面包屑及面包屑国际化的实现代码

面包屑（Breadcrumb）是一种常见的导航组件，用于展示当前页面所处的位置。在 Vue 中，可以通过路由和组件结合实现面包屑。

首先，在路由配置中为每个路由添加一个 `meta` 属性，用于存储该路由对应的面包屑信息，例如：

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      breadcrumb: [
        {name: 'Home', link: '/home'},
      ]
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      breadcrumb: [
        {name: 'Home', link: '/home'},
        {name: 'About', link: '/about'}
      ]
    }
  },
  // ...
]

接着，在组件中使用 `$route` 对象获取当前路由信息，并根据 `meta` 中的面包屑信息渲染面包屑组件，例如：

<template>
  <div class="breadcrumb">
    <span v-for="(item, index) in breadcrumb" :key="index">
      <router-link :to="item.link">{{ $t(item.name) }}</router-link>
      <span v-if="index !== breadcrumb.length - 1">/</span>
    </span>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumb() {
      const breadcrumb = []
      let route = this.$route
      while (route) {
        if (route.meta && route.meta.breadcrumb) {
          breadcrumb.unshift(...route.meta.breadcrumb)
        }
        route = route.parent
      }
      return breadcrumb
    }
  }
}
</script>

这里使用了 `$t` 方法来实现面包屑的国际化，需要在 Vue 的实例中配置对应的语言包，例如：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en,
    zh,
  },
})

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

其中 `en.json` 和 `zh.json` 分别为英文和中文语言包，例如：

{
  "Home": "Home",
  "About": "About"
}