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?