Having trouble eliminating the underline on Vue router-link?

Question

Having trouble eliminating the underline on Vue router-link?

I've experimented with various approaches in an attempt to remove the underline from router-link.

This is the code I have:

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

I'm specifically trying to eliminate the underline from sub-links only.

Methods I've attempted:

Using inline style

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

Applying a class

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

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

Defining a different tag

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

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

Utilizing a separate tag + class declaration for that tag

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

These are just a few attempts, I have exhaustively explored every conceivable method... Is there something crucial about customizing Vue router-link that eludes me?

css vue.js vuejs2 vue-router routerlink

Answer 1

Answer №1

Utilizes

display: inline-block;text-decoration:none;

, the key is to use display: inline-block;.

CSS specification explains

When it comes to block containers that create an inline formatting context, the decorations get carried over to an implicit inline element wrapping all in-flow inline-level children of the block container. For every other element, the decorations are propagated to any in-flow children. Please note that text decorations do not extend to floating and absolutely positioned descendants, or to the content within atomic inline-level descendants such as inline blocks and inline tables.

Example: The hyperlink COVID-19 in your code will remove the underline.

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

Here's a demonstration:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f7f4e4acf3eef4f5e4f3c1b2afb1afb0">[email protected]</a>/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

Answer 2

Utilizes

display: inline-block;text-decoration:none;

, the key is to use display: inline-block;.

CSS specification explains

When it comes to block containers that create an inline formatting context, the decorations get carried over to an implicit inline element wrapping all in-flow inline-level children of the block container. For every other element, the decorations are propagated to any in-flow children. Please note that text decorations do not extend to floating and absolutely positioned descendants, or to the content within atomic inline-level descendants such as inline blocks and inline tables.

Example: The hyperlink COVID-19 in your code will remove the underline.

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

Here's a demonstration:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f7f4e4acf3eef4f5e4f3c1b2afb1afb0">[email protected]</a>/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

Answer 3

Answer №2

When you examine the DOM structure of a router-link, you'll notice that it is represented by an a tag. It's important to note that although the initial underline may be removed, an underline will still appear when you hover over the text of the router link.

Take a look at this code snippet:

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

Answer 4

When you examine the DOM structure of a router-link, you'll notice that it is represented by an a tag. It's important to note that although the initial underline may be removed, an underline will still appear when you hover over the text of the router link.

Take a look at this code snippet:

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

Answer 5

Answer №3

The router-link on the outside is adding an underline to its text, and the inner router-links are also underlining their text.

Right now, your inner router-links have double underlines applied to them.

You should remove the underline from both. If you want another element to have an underline, apply it specifically to that element.

Answer 6

The router-link on the outside is adding an underline to its text, and the inner router-links are also underlining their text.

Right now, your inner router-links have double underlines applied to them.

You should remove the underline from both. If you want another element to have an underline, apply it specifically to that element.

Having trouble eliminating the underline on Vue router-link?

Answer №1

Answer №2

Answer №3

Similar questions

When using Vue-Formulate, resetting a form does not cause the validation message to show

Pages with embedded HTML code

Retrieve the index of a v-for loop and then send it as a parameter to a specific function

Ways to create a responsive Instagram iframe without using JavaScript

Can the text color be customized to match the brightness level of the background area being covered?

Interacting with an entirely distinct Vue component

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

The Threejs Raycaster detects collisions with objects even when the ray is just grazing the surface

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

Placing a div within a 960 grid system can sometimes result in unexpected spacing

Vertical text alignment alongside an image in multiple lines

Prevent pinch zoom in webkit (or electron)

Conceal overflow content within a Bootstrap btn-group using CSS styling

Tips for managing mouseover events on a row within an HTML table

The slides on my Bootstrap carousel are failing to display

Eliminate empty space in the table cell

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

Are HTML/CSS/JavaScript adjustments made after DOM loading taken into consideration in Google search results?

Can a pledge be honored at a precise moment?

The appearance of the page varies when viewed on different computers using the same version of Firefox