vue导航栏刷新,选中样式不修改(选中状态刷新不消失)

在路径加入获取到变化的index;

<router-link v-for="(item,index) in list" 
     :key="item.value" :to="{path:item.path,query:{item:index}}"
     :class="{'router-link-exact-active':ind == index}"   //根据判断ind与index是否相等,改变tab栏的字体样式
      @click.native="changeBgc(index)"  class="topbar-item"
    > 
      {{item.label}} 
</router-link>

export default {
  data () {
    return {
    // tab栏列表
      list: [
        {path:'/main',label:'处理中心'},
        {path:'/sys',label:'消息中心'},
      ],
      ind: '0', // 用ind作为选择标识
    }
  },
  methods: {
  // 点击tab栏,修改ind的值
    changeBgc(index){
      this.ind = index;
    },
  },
  mounted(){
    if(this.$route.query.item){
      this.ind = this.$route.query.item;
    }else{
      this.ind = 0;
    }
  }
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值