面包屑
<template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path"><span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect"> {{ generateTitle(item.meta.title) }}</span><router-link v-else :to="item.redirect||item.path">{{ generateTitle(item.meta.title) }}</router-link></el-breadcrumb-item></transition-group></el-breadcrumb>
</template>
import { generateTitle } from "@/utils/i18n";
methods: {getBreadcrumb() {},generateTitle}
菜单栏是一样的,我直接放了一整块的代码,按照相应的改就行,主要也是用的generateTitle
<template><div v-if="!item.hidden":class="parentActive(item)?'isActive menu-wrapper':'menu-wrapper' "@click="selectCurr(item)"><templatev-if="hasOneShowingChild(item.children,item)&& (!onlyOneChild.children||onlyOneChild.noShowingChildren) &&!item.alwaysShow"><app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"><el-menu-item :index="resolvePath(onlyOneChild.path)":class="{'submenu-title-noDropdown':!isNest}"><item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)":title="generateTitle(onlyOneChild.meta.title)" /></el-menu-item></app-link></template><el-menu-item v-else ref="subMenu":index="resolvePath(item.path)" popper-append-to-body><div slot="title" @click="current(item)"><item v-if="item.meta":icon="item.meta && item.meta.icon":title="generateTitle(item.meta.title)" /></div></el-menu-item></div>
</template><script>
import path from 'path'
import { generateTitle } from '@/utils/i18n'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'export default {name: 'SidebarItem',components: { Item, AppLink },mixins: [FixiOSBug],props: {item: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: ''}},data() {this.onlyOneChild = null;return {currentname:''}},methods: {current(item){this.$router.push(item.redirect);},parentActive(item){let itemChildren = item.children;if(itemChildren && itemChildren.length>0){for(let idx in itemChildren){let child = itemChildren[idx];let currPath = this.resolvePath(child.path);if(currPath === this.$route.path){this.selectCurr(item);return true;}}}},selectCurr(routerObj){let hasOne = this.hasOneShowingChild(routerObj.children,routerObj);if(!hasOne){this.$emit("retParentObj",routerObj);}else{this.$emit("retParentObj",null);}},hasOneShowingChild(children = [], parent) {const showingChildren = children.filter(item => {if (item.hidden) {return false} else {this.onlyOneChild = item;return true}});if (showingChildren.length === 1) {return true;}if (showingChildren.length === 0) {this.onlyOneChild = { ... parent, path: '', noShowingChildren: true };return true;}return false;},resolvePath(routePath) {if (isExternal(routePath)) {return routePath;}if (isExternal(this.basePath)) {return this.basePath;}return path.resolve(this.basePath, routePath);},generateTitle}
}
</script><style scoped>.el-menu-item{font-size: 14px;}.none{color: bfcbd9;}.blue{color: #1890ff;}</style>