vuejs2.0 选项卡效果 类 tab插件

页面分为 左右两部分 左边就是选项 右侧通过router-view 动态加载相应的模块

如何 实现 最上面图片 根据路由跳转实现 动态切换 ？

---

<template>
  <div class="detail-wrap">
    <div class="detail-left">
      <div class="product-board">
        <img :src="productIcon">
        <ul>
          <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
            {
   { item.name }}
          </router-link>
        </ul>
      </div>
    </div>
    <div class="detail-right">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      products: [
        {
          name: '数据统计',
          path: