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

Vue.js 中的面包屑通常使用路由信息来生成。以下是一个简单的面包屑组件示例：

<template>
  <div class="breadcrumbs">
    <router-link to="/">Home</router-link>
    <span v-for="(crumb, index) in crumbs" :key="index">
      <span v-if="index > 0">&nbsp;&gt;&nbsp;</span>
      {{ crumb }}
    </span>
  </div>
</template>

<script>
export default {
  name: "Breadcrumbs",
  computed: {
    crumbs() {
      const crumbs = [];
      const currentRoute = this.$route;
      if (currentRoute && currentRoute.matched) {
        currentRoute.matched.forEach(route => {
          if (route.meta && route.meta.breadcrumb) {
            crumbs.push(this.$t(route.meta.breadcrumb));
          }
        });
      }
      return crumbs;
    }
  }
};
</script>

在这个示例中，我们假设路由配置中的 `meta.breadcrumb` 属性包含面包屑的文本。我们使用 `currentRoute.matched` 来获取当前路由的匹配路由记录，并迭代每个记录以查找包含 `meta.breadcrumb` 的属性。我们使用 `$t` 方法来将文本进行本地化。

要使用此组件，请在路由配置中定义 `meta.breadcrumb` 属性：

const routes = [
  {
    path: "/",
    component: Home,
    meta: {
      breadcrumb: "Home Page"
    }
  },
  {
    path: "/about",
    component: About,
    meta: {
      breadcrumb: "About Us"
    }
  },
  // ...
];

要本地化面包屑，您需要使用 Vue I18n 插件。在此处提供一个简单的示例：

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "en", // default locale
  messages: {
    en: {
      "Home Page": "Home Page",
      "About Us": "About Us"
    },
    zh: {
      "Home Page": "首页",
      "About Us": "关于我们"
    }
  }
});

new Vue({
  el: "#app",
  router,
  i18n,
  render: h => h(App)
});

现在，您可以在模板中使用 `$t` 方法来本地化面包屑文本。

<template>
  <div class="breadcrumbs">
    <router-link to="/">Home</router-link>
    <span v-for="(crumb, index) in crumbs" :key="index">
      <span v-if="index > 0">&nbsp;&gt;&nbsp;</span>
      {{ $t(crumb) }}
    </span>
  </div>
</template>