vue-link : 라우터 링크에서 밑줄을 삭제하는 방법

vue-link : 라우터 링크에서 밑줄을 삭제하는 방법

그 결과 밑줄이 그어진 링크가 생성됩니다.

<li><router-link to="/hello">Hello</router-link></li>

제가 알기로는router-link요소가 생성하다a태그를 붙입니다.

CSS에서 다음 사항을 시도했습니다.

router-link{
    text-decoration: none;
}

---

router-link a{
    text-decoration: none;
}

---

router-link a{
    text-decoration: none !important;
}

하지만 불행히도 이 중 어느 것도 효과가 없습니다.

Vuetify를 사용하는 사람이 있다면 아래 스타일은 Vuetify의 빌트 스타일 때문에 작동하지 않습니다.대신 인라인 CSS 스타일링을 사용해야 합니다.

<router-link
 style="text-decoration: none; color: inherit;"
 to="/hello">

로 변환됩니다.<a ...
밑줄을 지우려면 이렇게 하세요.

a { text-decoration: none; }

다음과 같이 목록 항목 링크를 대상으로 할 수 있습니다.

li a {
    text-decoration: none;
}

다음과 같이 라우터 링크의 태그프롭을 사용하여 li css 클래스를 사용할 수 있습니다.

<li><router-link tag="li" to="/hello">Hello</router-link></li>

이 링크는 li css 속성을 사용하지만 일반 라우터 링크와 동일하게 작동합니다.

Vue 구성 요소 태그는 HTML 태그를 생성하지 않습니다.
실제로 존재하는 HTML 태그를 확인하려면 DOM 인스펙터를 조사합니다.

일반 클래스 이름을 사용해야 합니다.

라우터 링크태그에 클래스를 추가합니다.

<router-link class="routerLink" to="/hello">Hello</router-link>

그런 다음 css를 클래스에 지정합니다.

.routerLink{
     text-decoration: none;
 }

이것으로 동작합니다. : )

SCSS

div /deep/ .v-list a {
    text-decoration: none;
}

CSS

div >>> .v-list a{
    text-decoration: none;
}

비록 이 대답은 꽤 명백해 보이지만.위의 동료들은 당신이 Laravel 프레임워크와 함께 vuetify를 사용한다면 이 문제는 다음과 같이 해결될 수 있다고 말하는 것을 잊었다고 생각합니다.액세스:

resources\displays\app.scss 파일

그리고 그 줄에 코멘트를 달아주세요.

@ '~bootstrap/scss/bootstrap' Import;

이렇게 하면 보통 이러한 유형의 문제가 해결됩니다. 실제로는 라이브러리의 충돌입니다.

Boostrap 5를 사용하는 경우 text-decoration-none 클래스를 사용할 수 있습니다.

<router-link href="yourlink" class="text-decoration-none" >

</router-link>

자세한 내용은 부트랩 설명서를 참조하십시오.어플리케이션에서 Vue3를 사용하고 있는 추가 정보입니다.

리액트-라우터에서도.링크 태그는 텍스트에 밑줄을 그립니다.태그 내부의 텍스트(h1, h3, p)는 앵커 태그로 변환되기 때문에 다음과 같습니다.

a{text-decoration: none;}

언급URL : https://stackoverflow.com/questions/44808474/vue-router-how-to-remove-underline-from-router-link