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