vue路由跳转但是tab标签页没有跳转

如果你使用了vue-router进行路由跳转，但是tab标签页没有跟着跳转，可能是因为你没有为tab标签页设置相应的路由。
一种解决方法是，为每个标签页设置一个对应的路由，然后在路由跳转时，同时更新选中的标签页。例如：
// 在路由配置中设置每个标签页对应的路由
const routes = [
{ path: '/home', component: Home, meta: { tab: 'home' } },
{ path: '/about', component: About, meta: { tab: 'about' } },
{ path: '/contact', component: Contact, meta: { tab: 'contact' } }
];

// 在页面中使用<router-view>来显示当前路由对应的组件
<template>
<div>
<div class="tabs">
<div :class="{ active: activeTab === 'home' }" @click="selectTab('home')">Home</div>
<div :class="{ active: activeTab === 'about' }" @click="selectTab('about')">About</div>
<div :class="{ active: activeTab === 'contact' }" @click="selectTab('contact')">Contact</div>
</div>
<router-view></router-view>
</div>
</template>

<script>
export default {
data() {
return {
activeTab: 'home'
};
},
methods: {
selectTab(tab) {
// 更新选中的标签页
this.activeTab = tab;
// 跳转到对应的路由
this.$router.push({ path: '/' + tab });
}
},
watch: {
// 监听路由变化，更新选中的标签页
$route(to) {
this.activeTab = to.meta.tab;
}
}
};
</script>
登录后复制
这样，在跳转路由时，标签页也会跟着更新。如果你使用的是其他的标签页组件库，也可以根据类似的原理进行修改。