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

Vue面包屑的实现方法：

1. 首先，在路由配置中定义每个页面的面包屑信息，例如：

{
  path: '/home',
  name: 'home',
  meta: {
    breadcrumb: [
      { text: 'Home', link: '/home' }
    ]
  },
  component: Home
},
{
  path: '/about',
  name: 'about',
  meta: {
    breadcrumb: [
      { text: 'Home', link: '/home' },
      { text: 'About', link: '/about' }
    ]
  },
  component: About
},

2. 接下来，在App.vue中引入vue-breadcrumbs组件，并在template中使用它进行面包屑的渲染：

<template>
  <div id="app">
    <breadcrumbs :crumbs="$route.meta.breadcrumb" />
    <router-view />
  </div>
</template>

<script>
import Breadcrumbs from 'vue-breadcrumbs'

export default {
  name: 'App',
  components: {
    Breadcrumbs
  }
}
</script>

面包屑国际化的实现方法：

1. 首先，在项目中引入vue-i18n插件，用于实现国际化。

2. 在国际化文件中定义面包屑的文本信息，例如：

{
  "home": "首页",
  "about": "关于我们"
}

3. 在路由配置中使用国际化文本信息，例如：

{
  path: '/home',
  name: 'home',
  meta: {
    breadcrumb: [
      { text: $t('home'), link: '/home' }
    ]
  },
  component: Home
},
{
  path: '/about',
  name: 'about',
  meta: {
    breadcrumb: [
      { text: $t('home'), link: '/home' },
      { text: $t('about'), link: '/about' }
    ]
  },
  component: About
},

4. 最后，在App.vue中使用vue-i18n的$t方法进行面包屑文本的国际化：

<template>
  <div id="app">
    <breadcrumbs :crumbs="getBreadcrumbs($route.meta.breadcrumb)" />
    <router-view />
  </div>
</template>

<script>
import Breadcrumbs from 'vue-breadcrumbs'

export default {
  name: 'App',
  components: {
    Breadcrumbs
  },
  methods: {
    getBreadcrumbs(crumbs) {
      return crumbs.map(crumb => {
        return {
          ...crumb,
          text: this.$t(crumb.text)
        }
      })
    }
  }
}
</script>

这样，我们就可以实现Vue面包屑和面包屑国际化了。