Vue 라우터 링크에서 밑줄을 제거할 수 없음

Vue 라우터 링크에서 밑줄을 제거할 수 없음

밑줄을 없애기 위해 거의 모든 노력을 다 한 것 같아요router-link.

코드는 다음과 같습니다.

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

하위 링크에서만 밑줄을 제거하려고 합니다.

내가 시도한 것:

인라인 스타일

<router-link style="text-decoration: none !important;" :to="{name: 'Plan'}">COVID-19</router-link>

클래스 할당

<router-link class="sub-link" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   .sub-link{text-decoration: none !important;}
</style>

태그 선언

<router-link tag="div" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   div{text-decoration: none !important;}
</style>

별도의 태그 할당 + 해당 태그에 대한 클래스 선언

<router-link :to="{name: 'Plan'}">
   <div class="sub-link">COVID-19</div>
</router-link>

이건 몇 가지 목록일 뿐이야. 말 그대로 내가 생각할 수 있는 모든 방법을 시도해봤어.Vue를 커스터마이즈하는 데 부족한 점이 있습니까?router-link?

사용하다display: inline-block;text-decoration:none;trick은 inline-block; 입니다.

CSS 사양 상태

인라인 포맷콘텍스트를 확립하는 블록컨테이너의 경우 장식은 블록컨테이너의 모든 흐름인라인 레벨의 자식을 랩하는 어나니머스 인라인 요소로 전파됩니다.그 외의 모든 요소의 경우, 이것은 모든 인플로우자녀에게 전파됩니다.텍스트 장식은 부동 및 절대 위치에 있는 하위 항목이나 인라인 블록 및 인라인 테이블 등의 원자성 인라인 수준 하위 항목 컨텐츠에 전파되지 않습니다.

예:링크COVID-19밑줄이 삭제됩니다.

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}" style="display: inline-block;text-decoration:none;">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

다음은 데모 1개입니다.

let Layout = {
  template: `<div>
  <h4>Layout Page </h4>
  <router-link to="/contact">
  <div>
    <p>Links<p>
    <router-link to="/contact/add" style="display: inline-block;text-decoration:none;">Add1</router-link>
    <router-link to="/addcontact">Add2</router-link>
  </div>
  </router-link>
  <router-view></router-view>
  </div>`
};
let Home = {
  template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};

let ContactList = {
  // add <router-view> in order to load children route of path='/contact'
  template: '<div>this is contact list, click <router-link to="/contact/add">Add Contact In sub Router-View</router-link> here to add contact<p><router-view></router-view></p> Or Click <router-link to="/addcontact">Add Contact In Current Router-View</router-link></div>'
};

let ContactAdd = {
  template: '<div>Contact Add</div>'
}

let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: 'home',
    component: Layout,
    children: [{
        path: 'home',
        component: Home
      },
      {
        path: 'contact',
        component: ContactList,
        children: [{
          path: 'add',
          component: ContactAdd
        }]
      },
      {
        path: 'addcontact', // or move ContactAdd as direct child route of path=`/`
        component: ContactAdd,
      }
    ]
  }]
});

new Vue({
  el: '#app',
  components: {
    'App': {
      template: '<div><router-view></router-view></div>'
    },
  },
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

라우터 링크에 대해 DOM을 검사하면 이 DOM이a태그. 첫 번째 밑줄이 제거된 경우에도 라우터 링크 텍스트 위로 마우스를 가져가면 밑줄이 표시됩니다.

이 스니펫을 사용하여

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

.expander a {
  text-decoration: none;
}

.expander a:hover {
  text-decoration: none;
}

바깥쪽router-link적용중text-decoration: underline그 내면의 텍스트와 내면의 텍스트에 대해서router-link에서도 적용되고 있습니다.text-decoration: underline내부 텍스트로 이동합니다.

당신은 본질적으로 당신의 내면에 이중 밑줄이 적용되어 있다.router-links그 순간.

둘 다 빼야 돼요.다른 요소가 필요한 경우text-decoration: underline해당 요소에 대해 별도로 설정합니다.

언급URL : https://stackoverflow.com/questions/63526678/cannot-remove-underline-from-vue-router-link