增加面包屑右侧内容显示

src/components/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
+  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between">
     <nav>
       <ol class="breadcrumb">
         <li v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item"
@@ -18,11 +18,17 @@
         </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: {
@@ -53,7 +59,9 @@ export default {
       }
 
       return crumbs
-    }
+    },
+    ...mapState(['breadRightText']) // 从Vuex映射showSidebar状态到组件的计算属性中
+
   },
   methods: {
     getTitle(route) {
@@ -69,6 +77,13 @@ export default {
   padding: 16px 12px;
   background-color: #f5f5f5;
   border-radius: 4px;
+  .breadRight{
+    a{
+      text-decoration: none;
+      color: #006AFF;
+    }
+  }
+
 }
 .home-icon{
   width: 16px;

src/router/index.js

@@ -100,14 +100,14 @@ const routes = [{
       breadcrumbParent: '站点列表' // 手动指定父级
     }
   },
-  {
-    path: '/agent/SitePersonalization',
-    name: '个性化设置',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/SitePersonalization.vue')
-  },
+  // {
+  //   path: '/agent/SitePersonalization',
+  //   name: '个性化设置',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/SitePersonalization.vue')
+  // },
   {
     path: '/agent/payList',
     isFirst: true,
@@ -399,6 +399,7 @@ router.beforeEach((to, from, next) => {
   } else {
     store.commit('SET_HEADER', true); // 其他页面显示顶部
   }
+  store.commit('SET_BREADRIGHTTEXT', '')//清空面包屑右侧内容
   store.dispatch('showLoading')
   next();
 });

src/store/index.js

@@ -10,6 +10,7 @@ export default new Vuex.Store({
     showHeader: false,
     menuList: [], //目录菜单
     showBreadcrumb: false, //是否展示面包屑
+    breadRightText: '', //是否展示面包屑
     pageTitle: '一般新文献', //页面标题
     addServiceList: [], //选中的服务
     isLoading: false, //页面loading
@@ -336,6 +337,11 @@ export default new Vuex.Store({
     }) {
       commit('SHOW_BREAD');
     },
+    SET_BREADRIGHTTEXT({
+      commit
+    }) {
+      commit('SET_BREADRIGHTTEXT');
+    },
     SET_PAGETITLE({
       commit
     }) {
@@ -393,6 +399,9 @@ export default new Vuex.Store({
     SHOW_BREAD(state, show) {
       state.showBreadcrumb = show;
     },
+    SET_BREADRIGHTTEXT(state, text) {
+      state.breadRightText = text;
+    },
     SET_PAGETITLE(state, title) {
       state.pageTitle = title;
     },