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

将此样式设置为组件

.env

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

2 个答案: