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

Vue面包屑可以通过Vue Router来实现，下面是一个简单的例子：

<template>
  <nav class="breadcrumb">
    <router-link v-for="(crumb, index) in crumbs" :key="index" :to="crumb.to">
      {{ crumb.name }}
    </router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const routes = this.$route.matched;
      return routes.map(route => ({
        name: route.meta.name,
        to: route.path || '/',
      }));
    },
  },
};
</script>

<style>
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}
</style>

这里通过`this.$route.matched`获取当前路由的所有匹配记录，然后遍历生成面包屑。

关于国际化，可以通过Vue I18n来实现，下面是一个简单的例子：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: {
    breadcrumb: {
      home: 'Home',
      about: 'About',
      contact: 'Contact',
    },
  },
  zh: {
    breadcrumb: {
      home: '首页',
      about: '关于我们',
      contact: '联系我们',
    },
  },
};

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages,
});

export default i18n;

然后在组件中使用：

<template>
  <nav class="breadcrumb">
    <router-link v-for="(crumb, index) in crumbs" :key="index" :to="crumb.to">
      {{ $t(`breadcrumb.${crumb.name}`) }}
    </router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const routes = this.$route.matched;
      return routes.map(route => ({
        name: route.meta.name,
        to: route.path || '/',
      }));
    },
  },
};
</script>

这里使用了`$t`方法来实现国际化。需要注意的是，需要在Vue根实例中注入i18n实例，如下所示：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import i18n from './i18n';

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