提交 5dafd006 编写于 作者: tony001's avatar tony001

面包屑调整

上级 c6f30c50
<template>
<el-breadcrumb
class="app-breadcrumb"
separator="/"
>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbs"
:key="item.path"
>
<span
v-if="index === breadcrumbs.length-1"
class="no-redirect"
>{{ $t(item.meta.caption) }}</span>
<a
v-else
@click.prevent="handleLink(item)"
>{{ $t(item.meta.caption) }}</a>
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.id">
<span v-if="index === breadcrumbs.length-1" class="no-redirect">{{ $t(item.title) }}</span>
<a v-else @click.prevent="handleLink(item)">{{ $t(item.title) }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
......@@ -24,14 +12,32 @@
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { RouteRecord, Route } from 'vue-router'
import NavDataService from '@/service/app/navdata-service';
@Component({
})
export default class Breadcrumb extends Vue {
private breadcrumbs: RouteRecord[] = []; //面包屑列表
/**
* 面包屑列表
*
* @memberof Breadcrumb
*/
private breadcrumbs: RouteRecord[] = [];
/**
* 默认视图标识
*
* @memberof Breadcrumb
*/
@Prop() public indexViewTag: string;
@Prop() public defPSAppView: any; //默认视图
/**
* 首页路径
*
* @memberof Breadcrumb
*/
@Prop() public indexViewPath: string;
/**
* 监听路由
......@@ -58,24 +64,30 @@ export default class Breadcrumb extends Vue {
* @memberof Breadcrumb
*/
private getBreadcrumb() {
this.breadcrumbs = this.$route.matched.filter((item) => {
return item.meta && item.meta.caption
})
if(this.defPSAppView){
/**如果配置了默认视图,给面包屑第一级赋值默认视图为首页 */
}
let navDataService = NavDataService.getInstance();
this.breadcrumbs = navDataService.getNavData();
}
/**
* 单机面包屑
* 面包屑点击行为
*
* @memberof Breadcrumb
*/
private handleLink(item: any) {
this.$router.push(item).catch(err => {
// 首页
if(Object.is(item.id,this.indexViewTag)){
if(this.$route.matched && this.$route.matched.length >0){
this.$router.push(`/${this.indexViewPath}`);
}
}else{
// 非首页
this.$router.push(item.path).catch(err => {
console.warn(err);
});
}
let navDataService = NavDataService.getInstance();
navDataService.removeNavData(item.id);
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册