Css 如何在vue.js中定义路由器链接内容颜色

在我的项目中，我使用App.vue的vue.js

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

我已经为商品、评级和卖家定义了路线链接

我想在样式模块中设置它们的颜色

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

在chrome的元素中，我发现：

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

---

我不知道为什么，谁能给我帮助？

不幸的是，您不能使用css选择器符号选择自定义Vue.js组件。您可以向路由器链接添加一个类，并使用该类名选择它们。它不像按元素类型选择那样方便，但它可以工作。例如，将此

seller

转换为此

seller

。然后，在css中，打开以下选项：

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

为此：

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

---

有关更多信息，请参见此问题：

将此样式放在组件上

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

.v-toolbar_u项目.v-btn:非（.v-btn--浮动）：非（.v-btn--图标），
.v-工具栏\项.v-菜单，
.v-工具栏\项.v-菜单\激活器{
文字装饰：无；
}

我已经按照您所说的进行了测试。但它也不起作用。你能发布一个最小的、完整的、可验证的示例（只要有足够的代码，如果我运行它，我就会遇到与你相同的问题或错误？），这样我就可以试着看看发生了什么。请参阅以了解如何执行此操作。

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

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

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