javascript - 基于vue-route-link active的动态颜色

Question

我正在寻找一种根据链接的确切或事件属性自定义 css 的方法。也就是说，当有人单击菜单中的元素时，下划线会根据链接是否为事件路由器链接而改变。我能够做到这一点，但是当链接处于事件状态时始终具有相同的颜色。这意味着每当有人单击链接时，底部边框就会变为黄色。我想要的是，当有人点击主页时，颜色是红色，当有人点击图表时，颜色是蓝色等等(以防我有更多链接)。

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
   data() {
    return {
      links: [
        { icon: 'dashboard', text: 'Home', route: '/', component: home , color:"red"},
        { icon: 'mdi-chart-pie', text: 'Radar diagrammen', component: diagram, route: '/diagram' , color:"blue"}
      ]
    }
  }
})

HTML

<div id="app">
    <div>
       <v-app-bar flat app dark class='elevation-0'> 

      <v-toolbar-title class="text grey--text">
        <span class="font-weight-light">Stations</span>
      </v-toolbar-title>
<v-spacer></v-spacer>
<div class="flex-grow-1"></div>        
         <v-btn v-for="link in links"
         :key="link.text"
         router :to="link.route"
         text
         exact
         small
         tile
         active-class="active text-center">{{link.text}}</v-btn>
      </div>
</div>

CSS

.active {
      border-bottom: yellow solid 2px;
    }

Answer 1

这种方法是- 将选定的类添加到父级- 创建类似

的 css 规则

.red .nav--link__red {}
.blue .nav--link__blue {}

• 单击时，我们以查找所选元素的方式设置父类。

https://codepen.io/Ranushka/pen/ZEzjdrO

我是 vue.js 的新手，所以会有更好的解决方案。