antd vue的面包屑结合路由的实现记录

使用背景，公司大佬集成的的一个vue为基础的框架，在使用中大佬的按照常规来写的面包屑处理方式，与现实项目中需求有所出入，自己更改了一下，记录一下，防止以后遇到。

Breadcrumb面包屑

• 场景：

• html

<a-breadcrumb :routes="breadcrumb" separator=">">
  <template #itemRender="{route, routes, paths}">
      <span v-if="routes.indexOf(route) === routes.length - 1">
         {{route.breadcrumbName}}
      </span>
      <span v-else @click="breadCrumbClick(route)" :class="route.isStop ? 'cursorClass' : 'normal'">
         {{route.breadcrumbName}}
      </span>
   </template>
</a-breadcrumb>

• computed

computed: {
      breadcrumb() {
         let arr = [];
         this.$route.matched.map(route => {
            let parent = route.meta.parent;
            if(parent) {
               arr.push({
                  breadcrumbName: i18nRender(parent.title),
                  path: parent.path,
                  isStop:true
               });
            }
            arr.push({
               breadcrumbName: i18nRender(route.meta.title),
               path: route.path,
               isStop:false
            });
         });
         arr.splice(0, 1);
         return arr;
      }
   },

• methods

methods:{
	breadCrumbClick(route) {
      if(route.isStop) {
         this.$router.push({
            path:route.path
         });
      }
	},
}

• i18Render方法

export function i18nRender (key) {
   return i18n.t(`${key}`);
}

export default i18n;

大佬使用了 vue-i18n插件
链接: 网址.
此插件是是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

• vue-i18 使用方式

npm :
npm install vue-i18n
yarn 
yarn add vue-i18n

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

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

Vue.use(VueI18n)

如果使用全局的 script 标签，则无须如此 (手动安装)