在我的項目中，我用的是App.vue的vue.js。

我已經為商品、評級和賣家定義了路由鏈接。

我想在樣式模塊中設置它們的顏色。

下面是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>

下面是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>

但是我發現這些定義不起作用:

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

在chrome的《元素》中，我發現:

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

已被更改為

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

當我測試了一個標簽而不是路由鏈接時，它仍然不正常，就像

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

我不知道為什么，誰能給我一個幫助？

不幸的是，您不能使用css選擇器符號選擇定制的Vue.js組件。您可以向路由器鏈接添加一個類，并使用該類名選擇它們。這不像通過元素類型進行選擇那么方便，但也是可行的。比如把這個& ltrouter-link to = '/seller ' & gt；賣家& lt/router-link & gt；變成這樣& ltrouter-link to = '/seller ' class = " router link " >賣家& lt/router-link & gt；。然后在你的css中，把這個:

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

變成這樣:

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

更多信息請看這個問題:Vue:通過CSS選擇組件最干凈的方法是什么？

將此樣式放在組件上:

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

你也可以使用一個{你的css樣式}，因為它會被轉換成一個錨，這對我來說很有效。

您可以設置默認標簽:

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

在您的風格部分，您還可以通過以下方式構建標簽:

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