Исправить хлебные крошки в Vue JS ⇐ Javascript

[Anonymous]

Я работаю над проектом в Vue JS. Я хочу создать веб -сайт с несколькими страницами (маршрутизаторы). Поэтому я создал компонент Trail Trail, чтобы показать текущий путь. Я новичок в Vue JS, но я думаю, что нахожусь на правильном пути. Я не хочу, чтобы раздел «>» между крошками был подчеркнут, когда я зависаю над последним элементом хлебной крошки. < /Li>
Я также не хочу, чтобы курсор переходил на указатель При паряке над «>» seperator. < /li>
И я не могу избавиться от сепаратора «>», когда показана только домашняя страница. Тогда это выглядит так: «StartSeite>». < /li>
< /ul>
Это мой компонент Breadcrumb.vue: < /p>

Код: Выделить всё

{{ crumb.name }}


{{ crumb.name }}






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;
},
},
};




.breadcrumb-icon {
width: 1.4rem;
height: 1.4rem;

}
nav a.router-link-exact-active {
color: black;
}


< /code>
Это компонент CSS -файл: < /p>

@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 */

}

< /code>
Это файл base.css: < /p>
/* color palette from  */
: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;
}

< /code>
Знаете ли вы, как исправить эти проблемы или иметь подсказку для меня? Но, насколько я вижу, не может быть доступен к каким -либо классам CSS..breadcrumb a:hover + a::before {
color: #007bff; /* Change this to your desired hover color */
}

Но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -in-vue-js