4

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?

4 Answers 4

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?

2
  • I have tested as you said. But it also does not work.
    – stack
    Commented Jul 13, 2018 at 6:23
  • Can you post a minimal, complete, verifiable example (just enough code so that if I run it, I get the same problem or error you do?) That way I can try to see what's going on. See stackoverflow.com/help/mcve for how to do this.
    – Keara
    Commented Jul 13, 2018 at 16:49
1

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

you can also use a {your css style} since it will be converted to an anchor, that worked for me.

1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review Commented May 23, 2023 at 13:16
0

Your can set a default tag :

<router-link :to="/path" exact tag="div"> </router-link>` 

In your style section you car aslo constum the tag by:

.router-link-exact-active{ // your style herer }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.