实现tab导航路由跳转

html篇

<div
class="tab"
v-for="i in tabs"
:key="i.path"
:class="{checked : navActive(i.path),}"
@click="$router.push(i.path)"
>
{{i.name}}
<div :class="{active : navActive(i.path),}"></div>
</div>

data篇

tabs: [
{ name: '赛事赛程', path: '/springtime/mobile/data/schedule' },
{ name: '战队积分', path: '/springtime/mobile/data/teamIntegral' },
{ name: '数据榜单', path: '/springtime/mobile/data/list' },
]

用到的方法匹配路由

navActive(path) {
const pathArr = path.split('/');
const routePathArr = this.$route.path.split('/');
return pathArr[pathArr.length - 1] === routePathArr[routePathArr.length - 1]
}

样式篇

 .tab {
position: relative;
flex: 1;
text-align: center;
line-height: 0.44rem;
margin-top: 0.1rem;
margin-bottom: 0.24rem;
color: #a8a8a8;
&.checked {
color: #000;
}
.active {
position: absolute;
top: 0.5rem;
left: 43%;
width: 0.3rem;
height: 0.05rem;
border-radius: 0.05rem;
background: #2a7bf6;
}
}

最后

以上就是朴素热狗为你收集整理的实现tab导航路由跳转的全部内容，希望文章能够帮你解决实现tab导航路由跳转所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。