无法从Vue router-link中移除下划线。

Question

我很努力地尝试了各种方法来去掉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的某些信息？

- passionateLearner

---

你能检查那个DOM元素并发布下片段吗？它在这里运行：https://jsfiddle.net/kxec8s0L/ - Sowmyadhar Gourishetty

是的，我也已经尝试过了。这是截图：http://prntscr.com/u3lvix。但我不知道为什么DOM中会声明一个空的“class”？ - passionateLearner

这很奇怪。 - Sowmyadhar Gourishetty

出于好奇，这个下划线是在什么时候出现的？鼠标悬停时吗？ - Tony

我没有将它设置在任何事件上发生。这只是默认行为。我只是移除了默认颜色并将其设置为“白色”。 - passionateLearner

Answer 1

使用 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/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

- Sphinx

---

这个方法可行！谢谢！你能解释一下这个方法是如何起作用的吗？ - passionateLearner

CSS规范指出，对于已经设置了text-decoration: underline的父元素的内联块，下划线将不会被应用。 - Sphinx

我以为是Vue的问题，但原来是CSS的问题，哇！谢谢！ - passionateLearner

Answer 2

当您检查路由链接的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;
}

- Tony

Answer 3

外层的router-link将text-decoration: underline应用于其内部文本，而内部的router-link也将text-decoration: underline应用于其内部文本。

你现在实际上在内部的router-links上应用了双重下划线。

你需要从两个地方都删除它。如果你需要让另一个元素有text-decoration: underline，那么要单独为该元素设置。

- Daniel_Knights