使用背景,公司大佬集成的的一个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 标签,则无须如此 (手动安装)