vue 点击切换变色 tab 改变class 跳转链接

vue 点击切换变色 tab 改变class

1.

 <section id='foot_guide'>
    <div v-for="(item,index) in footlist" :key="index" @click="gotoAddress({path:item.path},index)" class="guide_item" :class="{active: activeIndex == index}">

      <svg class="icon" aria-hidden="true">
        <use v-bind:xlink:href="item.svg"></use>
      </svg>
      <div>{{item.name}}</div>

    </div>


  </section>

2.

  data(){
      return {
        footlist: [
          {
            name: '首页',
            path: '/msite',
            svg: '#icon-shouye2'
          },
          {
            name: '个人中心',
            path: '/profile',
            svg: '#icon-user'
          }

        ],
        activeIndex: 0,

      }
    },

 methods: {
      gotoAddress(path, index){
        this.$router.push(path);
        this.activeIndex = index
      }
    },

3.

  .active div {
    color: #FFBC00;
  }

  .active svg use {
    fill: #FFBC00;
  }