router-link 自定义点击事件

<li v-for="(item, index) in menuList">
     <router-link class="classify" tag="div" :to="{path: item.listLink}" @click.native="clkTag(index)">  <!-- 默认 event="click" -->
        <i class="iconfont img" v-if="selected === index"><img :src="item.iconSelect" alt=""></i>
        <i class="iconfont img" v-else><img :src="item.icon" alt=""></i>
         <span>{{ item.listTitle }}</span>
      </router-link>
</li>

注意：@click.native加上原生的点击事件

路由监听：

<script>
export default {
  name: 'dataCenterLayout',
  data () {
    return {
      selected: null,
      menuList: [
        {
          listTitle: '设备中心',
          listLink: '/dec',
          iconSelect: require('@/assets/images/bigData/icon_equipment_Select.png'),
          icon: require('@/assets/images/bigData/icon_equipment.png')
        },
        {
          listTitle: '用户中心',
          listLink: '/user',
          iconSelect: require('@/assets/images/bigData/icon_user_Select.png'),
          icon: require('@/assets/images/bigData/icon_user.png')
        }
      ]
    }
  },
  mounted () {
    this.clkTag()
  },
  watch:{   //监听路由变化
    '$route.path': function (newVal, oldVal) {
      this.getPath(newVal)
    }
  },
  methods: {
    clkTag (i) {
      let path = this.$route.path
      this.getPath(path)
    },
    getPath (path) {
      if (path.indexOf('/dec') > -1) {
        this.selected = 0
      } else if (path.indexOf('/user') > -1) {
        this.selected = 1
      }
    }
  }
}

必须要加上路由监听，不然切换的时候会有bug