v-for中的router跳转

Question

v-for有5个tab,默认第一个是active高亮的,点击某个tab时,通过index值决定某个tab高亮显示,那问题来了,router跳转该怎么写?下面是我写的代码,想知道在那个router.go里该如何写,v-link也行,只要能跳到tabs里的对应页:

<template>
    <div class="">
        <ul class="tab tab-block">
            <li v-for="tab in tabs" :class="['tab-item',{active: tabnum === $index}]">
                <a @click="toTab($index)">
                    <span>{{tab.name}}</span>
                </a>
            </li>
            <li class="tab-item" v-for="n in 30">
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                tabnum:0,
                tabs:[
                    {name:'基本信息'},
                    {name:'房屋信息'},
                    {name:'户主/卡片信息'},
                    {name:'设备管理'},
                    {name:'导入信息'}
                ]
            }
        },
        methods:{
            toTab:function(index){
            var self=this;
                self.tabnum=index;
                this.$route.router.go({path:''})
    }
        }
    }
</script>

Answer 1

你的data的结构稍微改一下，然后这样写会不会好一点：

data () {
  return {
    tabnum: 0,
    tabs: [
      {name:'基本信息', link:'/a'},
      {name:'房屋信息', link:'/b'},
      {name:'户主/卡片信息', link:'/c'},
      {name:'设备管理', link:'/d'},
      {name:'导入信息', link:'/e'}
    ]
  }
},
methods: {
  toTab (index) {
    this.tabnum = index
    this.$route.router.go({path: this.tabs[index].link})
  }
}

另外在vue-router里是可以设置active class的，建议你熟悉以后重新写一下你的tab结构，可以把bind-class的部分用router的功能替代。

Answer 2

我再修正一下：

这么改：

<template>
    <div class="">
        <ul class="tab tab-block">
            <li v-for="tab in tabs" class="tab-item">
                <a v-link="{ path: tab.path }"">
                    <span>{{tab.name}}</span>
                </a>
            </li>
            <li class="tab-item" v-for="n in 30">
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                tabs:[
                    {name:'基本信息', path: '/basic'},
                    {name:'房屋信息', path: '/houseInfo'},
                    {name:'户主/卡片信息', path: '/cardInfo'},
                    {name:'设备管理', path: '/equipmentInfo'},
                    {name:'导入信息', path: '/importInfo'}
               ]
           };
        }
    }
</script>
<style>
.v-link-active {
    color: red;//直接在这定义active样式就好了，使用内置的效果最佳
}
</style>