title: How to define router-link content color in vue.js
body: <p>In my project, I use vue.js of App.vue.</p>
  
  <p>I have defined route-link for goods,ratings,and seller.</p>
  
  <p>And I want to set color of them in style module.</p>
  
  <p>Here is template module of App.vue: </p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="app"&gt;
   &lt;v-header&gt;&lt;/v-header&gt;
   &lt;div class="tab"&gt;
  &lt;div class="tab-item"&gt;
    &lt;router-link to='/'&gt;goods&lt;/router-link&gt;
  &lt;/div&gt;
  &lt;div class="tab-item"&gt;
    &lt;router-link to='/rating'&gt;ratings&lt;/router-link&gt;
  &lt;/div&gt;
  &lt;div class="tab-item"&gt;
    &lt;router-link to='/seller'&gt;seller&lt;/router-link&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is style modual of App.vue.</p>
  
  <pre><code>&lt;style lang="stylus" rel="stylesheet/stylus"&gt;
   #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-heigh: 40px
      .tab-item
        flex: 1
        text-align: center
       &amp; &gt; router-link
        display: block
        color: rgb(240, 20, 20)
   &lt;/style&gt;
  </code></pre>
  
  <p>But i found these definition did not work:</p>
  
  <pre><code>&amp; &gt; router-link
        display: block
        color: rgb(240, 20, 20)
  </code></pre>
  
  <p>In chrome's Elements, I found that:</p>
  
  <pre><code>&lt;route-link to='/'&gt;goods&lt;/router-link&gt;
  </code></pre>
  
  <p>had been changed to</p>
  
  <pre><code>&lt;a href="#/" class="router-link-exact-active router-link-active"&gt;goods&lt;/a&gt;
  </code></pre>
  
  <p>When I had tested that a label instead of route-link, it was not OK all the same, like </p>
  
  <pre><code>&amp; &gt; a
   display: block
   color: rgb(240, 20, 20)
  </code></pre>
  
  <p>I don't know why, who can give me a help?</p>