vue.js - Vue-router：怎么将data里的值传到router-link在active时的样式里？

问题描述

问 题

请教如何将imgA中的路径传入active状态下的router-link中(如何判断是否存在router-link-active类名）

<router-link v-bind:to="item.path" v-bind:style="{backgroundImage:'url('+item.img+')'}">{{item.name}}</router-link>
**********
fItem:[{
          name:'商品列表',
          path:'/list',
          img:'../static/img/send1.png',
          imgA:'../static/img/send2.png'
        },{
          name:'已选商品',
          path:'/cart',
          img:'../static/img/cart1.png',
          imgA:'../static/img/cart2.png'
        },{
          name:'个人中心',
          path:'/mine',
          img:'../static/img/mine1.png',
          imgA:'../static/img/mine2.png'
        }]

解决方案

编程式导航+三元表达式:

    
    <a @click="changeRouter(item,index)" v-bind:style="{backgroundImage:'url('+flag==index?item.imgA:item.img+')'}">{{item.name}}</a>  //三元表达式
    
    
    data(){
        flag:0   //标记
    }
    
    
    changeRouter(item,index){
        this.flag=index  //改变标记
        this.$router.push({
           path:path,
        })
    }

这篇关于vue.js - Vue-router：怎么将data里的值传到router-link在active时的样式里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！