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