How to define router-link content color in vue.js

Question

In my project, I use vue.js of App.vue.

I have defined route-link for goods,ratings,and seller.

And I want to set color of them in style module.

Here is template module of App.vue:

<template>
<div id="app">
 <v-header></v-header>
 <div class="tab">
<div class="tab-item">
  <router-link to='/'>goods</router-link>
</div>
<div class="tab-item">
  <router-link to='/rating'>ratings</router-link>
</div>
<div class="tab-item">
  <router-link to='/seller'>seller</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>

Here is style modual of App.vue.

<style lang="stylus" rel="stylesheet/stylus">
 #app
  .tab
    display: flex
    width: 100%
    height: 40px
    line-heigh: 40px
    .tab-item
      flex: 1
      text-align: center
     & > router-link
      display: block
      color: rgb(240, 20, 20)
 </style>

But i found these definition did not work:

& > router-link
      display: block
      color: rgb(240, 20, 20)

In chrome's Elements, I found that:

<route-link to='/'>goods</router-link>

had been changed to

<a href="#/" class="router-link-exact-active router-link-active">goods</a>

When I had tested that a label instead of route-link, it was not OK all the same, like

& > a
 display: block
 color: rgb(240, 20, 20)

I don't know why, who can give me a help?

Answer 1

Unfortunately, you can't select a custom Vue.js component using the css selector notation. You can add a class to your router-links and select them using that class name. It's not as convenient as being able to select by element type, but it will work. For example, turn this <router-link to='/seller'>seller</router-link> into this <router-link to='/seller' class="routerlink">seller</router-link>. Then in your css, turn this:

& > router-link
  display: block
  color: rgb(240, 20, 20)

Into this:

& > .routerlink
  display: block
  color: rgb(240, 20, 20)

See this question for more information: Vue: What is the cleanest way to select a component via CSS?

Answer 2

Put This Style On component:

<v-btn flat class="font-weight-bolder text-white" to="/contact">

.v-toolbar__items .v-btn:not(.v-btn--floating):not(.v-btn--icon),
.v-toolbar__items .v-menu,
.v-toolbar__items .v-menu__activator {
  text-decoration: none;
}