Невозможно удалить подчеркивание из Vue router-link

Я думаю, что перепробовал почти все, пытаясь убрать подчеркивание с 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?


vue.js css vue-router vuejs2 routerlink
person passionateLearner    schedule 21.08.2020    source источник
comment
Можете ли вы проверить этот элемент в DOM и опубликовать этот фрагмент? Он работает здесь jsfiddle.net/kxec8s0L   -  person Sowmyadhar Gourishetty    schedule 21.08.2020
comment
Да, я тоже уже пробовал. Вот скриншот. prntscr.com/u3lvix. Я не знаю, почему в DOM объявлен пустой «класс»?   -  person passionateLearner    schedule 21.08.2020
comment
.expander a { text-decoration: none !important} Можете ли вы попробовать этот css один раз   -  person Sowmyadhar Gourishetty    schedule 21.08.2020
comment
С этим тоже не повезло :( Но, честно говоря, другие заявленные стили работают...? Только не "текстовое оформление"... prntscr.com/u3lzui   -  person passionateLearner    schedule 21.08.2020
comment
это очень странно   -  person Sowmyadhar Gourishetty    schedule 21.08.2020
comment
Из любопытства, когда это подчеркивание происходит? при наведении?   -  person Tony    schedule 21.08.2020
comment
Да.... Я трачу на это больше часа :*( Я также пробовал много других методов, таких как: удаление глобального css из App.js, v-bind:style и т.д...   -  person passionateLearner    schedule 21.08.2020
comment
Я не устанавливал, чтобы это происходило на каком-либо событии. Это просто поведение по умолчанию. Я просто удалил цвет по умолчанию и установил его на «белый».   -  person passionateLearner    schedule 21.08.2020
comment
Пожалуйста, проверьте инструменты разработчика браузера. Нажмите на вкладку Elements и переключитесь с Styles на Computed. У меня есть ощущение, что стиль преобладает над этим. Кажется, вы используете ключевое слово important несколько раз.   -  person Tony    schedule 21.08.2020
comment
хм... prntscr.com/u3m66t   -  person passionateLearner    schedule 21.08.2020
comment
Принятый ответ решил проблему. Это действительно странно .. но всем спасибо :)   -  person passionateLearner    schedule 21.08.2020

Ответы (3)


arrow_upward
6
arrow_downward

Использует display: inline-block;text-decoration:none;, хитрость заключается в display: 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>

Ниже приведена одна демонстрация:

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/[email protected]/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

person Sphinx    schedule 21.08.2020
comment
Это сработало! Спасибо! Не могли бы вы объяснить, как работает этот подход? - person passionateLearner; 21.08.2020
comment
спецификация CSS подчеркивает, что подчеркивание не будет применяться для встроенных блок, родительский элемент которого уже установлен text-decoration: underline - person Sphinx; 21.08.2020
comment
Я думал, что это проблема Vue, но это был CSS, вау! Спасибо! - person passionateLearner; 21.08.2020

arrow_upward
0
arrow_downward

Когда вы проверяете 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;
}

person Tony    schedule 21.08.2020

arrow_upward
0
arrow_downward

Внешний router-link применяет text-decoration: underline к своему внутреннему тексту, а внутренние router-link также применяют text-decoration: underline к своему внутреннему тексту.

По сути, на данный момент к вашему внутреннему router-links применено двойное подчеркивание.

Вам нужно удалить его с обоих. Если вам нужно, чтобы другой элемент имел text-decoration: underline, установите его для этого элемента отдельно.

person Daniel_Knights    schedule 21.08.2020