css - 如何在 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?