Browse Source

面包屑跳转增加携带参数

pull/69/head
zq 6 days ago
parent
commit
962320b9a4
  1. 87
      src/components/Breadcrumb.vue
  2. 2
      src/views/agent/siteServiceList.vue

87
src/components/Breadcrumb.vue

@ -1,15 +1,15 @@
<template>
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between">
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
<nav>
<ol class="breadcrumb">
<li v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item"
:class="{ active: index === breadcrumbs.length - 1 }">
<li
v-for="(item, index) in breadcrumbs"
:key="index"
class="breadcrumb-item"
:class="{ active: index === breadcrumbs.length - 1 }"
>
<template v-if="index !== breadcrumbs.length - 1">
<router-link to="/" v-if="item.title == '首页'">
<SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
</router-link>
<router-link v-else :to="item.path">{{ item.title }}</router-link>
<router-link :to="item.path">{{ item.title }}</router-link>
<img class="separator" src="@/assets/separator.png" alt="">
</template>
<template v-else>
@ -18,77 +18,83 @@
</li>
</ol>
</nav>
<div v-if="breadRightText" class="gap8 breadRight">
<img class="ml-8" src="@/assets/site/bind_sites.svg" alt="" />
站点简称<a :href="breadRightText">{{ breadRightText }}</a>
</div>
</div>
</template>
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
import { mapState } from 'vuex';
export default {
name: 'Breadcrumb',
components: {
SvgIcon1,
},
computed: {
breadcrumbs() {
if (this.$route.meta.hideBreadcrumb) return []
if (this.$route.meta.hideBreadcrumb) return [];
const crumbs = []
let currentRoute = this.$route
const crumbs = [];
let currentRoute = this.$route;
//
while (currentRoute) {
crumbs.unshift({
//
// const matchedRoute = this.$router.options.routes.find(
// r => r.name === currentRoute.name
// );
//
const routeWithParams = {
path: currentRoute.path,
query: currentRoute.query,
params: currentRoute.params
};
crumbs.unshift({
path: routeWithParams,
title: this.getTitle(currentRoute)
})
});
// meta.breadcrumbParent
if (currentRoute.meta.breadcrumbParent) {
currentRoute = this.$router.options.routes.find(
r => r.name === currentRoute.meta.breadcrumbParent
)
);
// $route
if (currentRoute) {
currentRoute = {
...currentRoute,
path: currentRoute.path,
query: this.$route.query, //
params: this.$route.params, //
meta: currentRoute.meta || {}
};
}
} else {
currentRoute = null
currentRoute = null;
}
}
return crumbs
},
...mapState(['breadRightText']) // VuexshowSidebar
return crumbs;
}
},
methods: {
getTitle(route) {
return typeof route.meta.title === 'function'
? route.meta.title(route)
: route.meta.title || route.name
}
: route.meta.title || route.name;
}
}
};
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
/* 保持之前的样式不变 */
.breadcrumb-container {
padding: 16px 12px;
background-color: #f5f5f5;
border-radius: 4px;
.breadRight{
a{
text-decoration: none;
color: #006AFF;
}
}
}
.home-icon {
width: 16px;
height: 16px;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
@ -105,14 +111,17 @@ export default {
height: 100%;
cursor: pointer;
}
.router-link-active {
height: 100%;
display: flex;
align-items: center;
}
.breadcrumb-item a {
color: #626573;
text-decoration: none;
&:hover {
color: #006AFF;
}

2
src/views/agent/siteServiceList.vue

@ -221,7 +221,7 @@ export default {
},
methods: {
jumpAdd(type){
this.$router.push(this.serviceAddUrl + '?type=' + type)
this.$router.push(this.serviceAddUrl + '?type=' + type + '&uid=' + this.uid)
},
toggleAllSelection() {
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();

Loading…
Cancel
Save