扩展mint-ui tabbar使用链接导航

<template>
  <a class="mint-tab-item"
    @click="$parent.$emit('input', id)"
    :class="{ 'is-selected': $parent.value === id }">
    <router-link :to="route">
      <div class="mint-tab-item-icon"><slot name="icon"></slot></div>
      <div class="mint-tab-item-label"><slot></slot></div>
    </router-link>
  </a>
</template>

<script>
import {  TabItem } from 'mint-ui';
/**
 * mt-tab-item
 * @module components/tab-item
 * @desc 搭配 tabbar 或 navbar 使用
 * @param {*} id - 选中后的返回值，任意类型
 * @param {slot} [icon] - icon 图标
 * @param {slot} - 文字
 *
 * @example
 * <mt-tab-item>
 *   <img slot="icon" src="http://placehold.it/100x100">
 *   订单
 * </mt-tab-item>
 */
export default {
  name: 'mt-tab-item2',
  extends:TabItem,
  props: ['id','route']
};
</script>

 然后

      <mt-tab-item2 id="订单" route="/order">
        <img slot="icon" src="../../assets/logo.png">
        订单
      </mt-tab-item2>

 这样点击tabitem就会跳转到指定的链接了