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'
        }]

页面显示内容是哪个路由 对应导航图片替换

阅读 3.1k
1 个回答

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

    
    <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,
        })
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题