无法从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;，技巧是 display：inline-block; 。

Css spec状态

对于建立内联格式设置上下文的块容器，装饰传播到包装的匿名内联元素块容器的所有流入的内联级子级。对全部其他元素会传播到任何流入子对象。注意文字装饰不会传播到浮动的绝对定位的后代，也不是原子内联级别的内容后代，例如内联块和内联表。

示例：您代码中的链接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>

外部router-link对其内部文本应用text-decoration: underline，内部router-link对其内部文本也应用text-decoration: underline。

此刻，您的内部router-links上基本上已经有双下划线了。

您需要将两者都删除。如果您需要另一个元素具有text-decoration: underline，请分别为该元素设置。

在检查DOM中的路由器链接时，您会看到它是一个svg标签。请记住，即使删除了初始下划线，将鼠标悬停在路由器链接文本上也会发生下划线。

使用此代码段

<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>

routerlink vue.js