javascript - Composant inférieur, pourquoi le texte de la classe liée à Vue ne change-t-il pas de couleur?

Question

Je mets
data() {

return {
  isActive: 'a'
}

}, si le 'a' dans
est remplacé par 'b', les mots publiés changeront de couleur

<template lang="html">
<p class="footer">

<p class="footer-box">
  <router-link :class="{'active': isActive === 'a'}" @click="select('a')" to="/" class="item">首页</router-link>
  <router-link :class="{'active': isActive === 'b'}" @click="select('b')" to="/create" class="item">发表</router-link>
  <router-link :class="{'active': isActive === 'c'}" @click="select('c')" to="/message" class="item">消息</router-link>
  <router-link :class="{'active': isActive === 'd'}" @click="select('d')" to="/user" class="item">我的</router-link>
</p>

</p>
</template>

<script>
export par défaut {
data () {

return {
  isActive: 'a'
}

},
méthodes : {

select (value) {
  this.isActive = value
}

}
}
</script>

<style lang="less">
.footer {

position: fixed;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
background-color: #fff;
border-top: 1px solid #bbb;
.footer-box {
  display: flex;
  height: 50px;
  width: 100%;
  line-height: 40px;
  .item {
    flex: 1;
    text-align: center;
  }
}

}
.actif {

color: #41B883;

}
</style>

Answer 1

Ce que vous avez écrit est trop compliqué. Cela peut être fait en écrivant une linkActiveClass lors de la configuration de la route. Il est recommandé de lire la documentation de vue-router
La configuration peut être écrite dans la route définie par main.js. = nouveau VueRouter({

linkActiveClass: "active",    //设置点击状态的class
mode: 'hash',
hashbang:true,
routes:routerConfig

})

Ajoutez ensuite le style .active{color: #41B883;} à votre style .vue

router-link est écrit comme ceci<router-link to="/" class="item">Homepage</router-link>

Answer 2

Il devrait suffire de le remplacer par @click.native. Bien sûr, la méthode ci-dessus est meilleure

.

Answer 3

Remplacez l'événement click par @click.native="select('a')";
Lorsque j'écris ce type de navigation, j'utilise généralement cette méthode, v-for
<ul>

       <li v-for="(item,index) in liData" :class="    {active:$route.matched[0].path==item.label}" ><router-link :to="item.label">{{item.name}}</router-link></li>

</ul>
données(){

return {

  liData:[
    {name:"首页",label:"/home"},
    {name:"设计器",label:"/designer"},
    {name:"任务管理",label:"/taskmanger"},
    {name:"节点管理",label:"/node"}
  ]
  },
这里的active的变化就是根据地址栏中变化而变化，这样前进后退都不会有问题

Answer 4

    <router-link :to="item.url" active-class="act-bar" tag="li" exact>
     
    </router-link>

Vous pouvez définir le style sélectionné .act-bar{}

Answer 5

<p class="footer-box">
   <router-link to="/">
      首页
   </router-link>
</p>

.router-link-active{
    color: #41B883;
}

Faites simplement ceci. La couleur définie dans .router-link-active est le lien de routeur sur lequel vous cliquez actuellement. La couleur du style après l'activation peut également être définie sur d'autres styles, puis les autres liens de routeur reviendront à la valeur par défaut. .Style