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

Question

在我的项目中，我使用了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的Elements中，我发现：

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

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

Answer 1

遗憾的是，您无法使用css选择器表示法选择自定义Vue.js组件。您可以在路由器链接中添加一个类，并使用该类名选择它们。它不像按元素类型选择那么方便，但它会起作用。例如，将这个<router-link to='/seller'>seller</router-link>变成这个<router-link to='/seller' class="routerlink">seller</router-link>。然后在你的CSS中，转过来：

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

进入：

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

有关更多信息，请参阅此问题：Vue: What is the cleanest way to select a component via CSS?

Answer 2

将此样式放在组件上

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