vue.js - v-for中的router跳转

查看:277
本文介绍了vue.js - v-for中的router跳转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

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>

解决方案

你的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的功能替代。

这篇关于vue.js - v-for中的router跳转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆