vue.js - v-for中的router跳转
本文介绍了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屋!
查看全文