vue Tab效果，动态添加类，移除兄弟类

要做一个类似tab效果的页面，点击按钮对应的组件显示，按钮添加、移除类

直接上代码

<template>
  <div class="contain">
    <div class="comparison_content">
      <router-view></router-view>
    </div>
    <ul class="tab_box">
      <li v-for="(todo,index) in todos"
          class="tab"
          v-on:click="addClass(index)"
          v-bind:class="{ current:index==current}">
        <router-link :to="{ path: todo.path }"
                     class="tab_text">{{todo.text}}</router-link>
      </li>

    </ul>
  </div>
</template>

<script>
export default {

  data () {
    return {
      current: 0,
      todos: [
        { path: 'first', text: '第一季度' },
        { path: 'second', text: '第二季度' },
        { path: 'third', text: '第三季度' },
        { path: 'fourth', text: '第四季度' },
        { path: 'annual', text: '全年度' },

      ]
    }

  },
  methods: {
    addClass: function (index) {
      this.current = index;
    }


  }

}
</script>

注：新手学vue中，写页面发现了个问题，路由跳转的页面的地址，如果加'/'的话，地址从根地址开始，不加的话才是从当前地址跳转。