fix面包屑在vuejs

Question

我也不希望光标在悬停在“>” Seperator上时变为指针。

仅显示主页时，我无法摆脱“>”分类器。然后看起来像这样：“ startseite>”。

图像之间和“ startseite”字符串是一个下划线，当我悬停在字符串上时，我想摆脱困境。

• 这是我的面包屑。项目组件：

• <template>
    <nav class="breadcrumb">
      <router-link v-for="(crumb, index) in breadcrumbs" :key="index" :to="crumb.path">
        <template v-if="crumb.name === 'Startseite'">
          <img :src="homeIcon" alt="Home" class="breadcrumb-icon" />
          {{ crumb.name }}
        </template>
        <template v-else>
          {{ crumb.name }}
        </template>
      </router-link>
    </nav>
  </template>
  
  <script>
  import homeIcon from '@/assets/img/Home.svg'; // Pfad zur SVG-Datei
  
  export default {
    data() {
      return {
        homeIcon,
      };
    },
    computed: {
      breadcrumbs() {
        let pathArray = this.$route.path.split("/");
        pathArray.shift(); // Remove the first empty element
        let breadcrumbArray = [{ name: "Startseite", path: "/" }];
        pathArray.forEach((path, index) => {
          breadcrumbArray.push({
            name: path.charAt(0).toUpperCase() + path.slice(1),
            path: "/" + pathArray.slice(0, index + 1).join("/"),
          });
        });
        return breadcrumbArray;
      },
    },
  };
  </script>
  
  <style scoped>
  
  .breadcrumb-icon {
    width: 1.4rem;
    height: 1.4rem;
    
  }
  nav a.router-link-exact-active {
    color: black;
  }
  
  </style>

• 这是组件CSS文件：

• @media (min-width: 1024px) {
    .Veranstaltungen {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
  }
  
  
  html, body {
      overflow: hidden; /* Hide scroll bars */
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      width: 100vw; /* Ensure full viewport width */
      height: 100vh; /* Ensure full viewport height */
  }
  
  /* upper Rectangle */
  
  .ver_background {
      position: absolute;
      width: 100vw; /* 100% of the viewport width */
      height: 100vh; /* 100% of the viewport height */
      left: 0;
      top: 80px;
      background: #E4E4E4; /* White background */
      border-radius: 20px 20px 0 0;
  }
  
  
  /* lower Rectangle Copy */
  
  .ver_window {
  
  position: absolute;
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  left: 0px;
  top: 244px;
  background: #F9FAFA;
  border-radius: 20px 20px 0px 0px;
  }
  
  /* Neue Veranstaltung */
  
  .headline {
  position: absolute;
  width: 333px;
  height: 40px;
  left: 40px;
  top: 132px;
  
  /* Headline_32 */
  
  font-style: normal;
  font-weight: 800;
  font-size: 2rem;
  line-height: 3.0rem;
  /* identical to box height, or 125% */
  
  color: #000000;
  
  }
  
  .breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: #000000;
    position: absolute;
    width: auto;
    height: auto;
    left: 2.5rem;
    top: 6rem;
  
  }
  
    .breadcrumb router-link a {
      text-decoration: none;
      color: black; /* Set the text color to black */
      padding: 5px;
    }
    
    .breadcrumb router-link:hover,
    .breadcrumb router-link a:hover {
      text-decoration: underline;
      color: darkgoldenrod; /* Change color on hover */
    }
    
    .breadcrumb router-link::after,
    .breadcrumb router-link a::after {
      content: ' / '; /* Add separator */
      color: #999; /* Separator color */
    }
    
    .breadcrumb router-link:last-child::after,
    .breadcrumb router-link a:last-child::after {
      content: ''; /* Remove separator after the last breadcrumb */
    }
    
    .breadcrumb a {
      text-decoration: none;
      color: #000000;
      padding: 0.2rem;
    
    }
    
    .breadcrumb a:hover {
      text-decoration: underline;
      background-color: #ff000000;
    }
    
    .breadcrumb a + a::before {
      content: ">";
      padding: 0 0.5rem;
      color: #6c757d;
      text-decoration: none; /* Ensure the ">" does not get underlined */
     
    }
    
    .breadcrumb-icon {
      width: 1.4rem;
      height: 1.4rem;
      margin-right: 0.2rem;
      position: relative;
      top: 0.25rem; /* Adjust this value to move the image up or down */
    
    }
    
    

这是base.css文件：

/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #2d3a42;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  /* --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); */

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  /*color: var(--color-text);*/
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

您知道如何解决这些问题或对我有提示？

I编辑了代码，并添加了多个CSS属性以备悬停效果。但是，据我所知，任何CSS类都无法访问“>”。 我为悬停情况创建了一个新的CSS课程：

.breadcrumb a:hover + a::before {
  color: #007bff; /* Change this to your desired hover color */
}

但它行不通。

如果您不希望悬停在悬停的“'>”字符中，那么您不应该在::前:: or efore or ::之后使用它。相反，您可以在路由器链接后有条件地添加它。

<template v-for="(crumb, index) in breadcrumbs">
  <router-link :key="index+'link'" :to="crumb.path" class="nav-item">
    <template v-if="crumb.name === 'Startseite'">
      <img :src="homeIcon" alt="Home" class="breadcrumb-icon" />
    </template>
    <template>
      {{ crumb.name }}
    </template>
  </router-link>
  <span class="seperator" :key="index+'separator'" v-if="index !== breadcrumbs.length -1">></span>
</template>

地，在以下情况下更新您的CSS，可确保仅在悬停时强调文本：

.nav-item:hover{
  text-decoration: underline!important;
}
.breadcrumb-icon {
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 8px;
}
.seperator{
  text-decoration: none!important;
}