前言
当我们在使用 vue 和 element 框架时,我们经常需要在不同的页面之间进行切换。而在某些情况下,我们需要在目标页面中打开特定的选项卡,以便更快地让用户找到他们需要的信息。本文将介绍如何使用 vue 和 element 框架实现从 A 页面跳转到 B 页面的 tab 选项卡的指定页上,让你的用户在使用你的应用程序时获得更好的体验。
需求效果
实现思路
-
在A页面跳转路由时要将
activeName
的值拼接在路由末尾; -
通过
$router.push
跳转并将拼接的activeName
的值传递到B页面; -
在B页面比较
activeName
的值即可。
核心代码
A页面
<div class="topTab">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" :stretch="true">
<el-tab-pane label="黑名单车辆" name="first"></el-tab-pane>
<el-tab-pane :label="'抽检'+tabData.ljrhcs+'次'" name="second"></el-tab-pane>
<el-tab-pane :label="'遥测'+tabData.ygcscs+'次'" name="third"></el-tab-pane>
<el-tab-pane :label="'机构检测'+tabData.jgjccs+'次'" name="fourth"></el-tab-pane>
<el-tab-pane :label="'维修'+tabData.wxcs+'次'" name="five"></el-tab-pane>
</el-tabs>
</div>
data() {
return {
activeName: "first", //默认第一个
};
},
methods: {
handleClick(event) {
const activeName = event.name;
this.$router.push({
path: `/roadCheck?activeName=${activeName}`,
});
},
},
B页面
<div class="tabs">
<el-tabs v-model="activeName">
<el-tab-pane label="路检路查" name="first"></el-tab-pane>
<el-tab-pane label="入户抽查" name="second"></el-tab-pane>
<el-tab-pane label="遥感监测" name="third"></el-tab-pane>
<el-tab-pane label="年检信息" name="fourth"></el-tab-pane>
<el-tab-pane label="维修信息" name="five"></el-tab-pane>
</el-tabs>
</div>
data() {
return {
activeName: "first", //默认第一个
};
},
mounted() {
this.tabsCode(); //tab
},
methods: {
//获取当前点击下标
tabsCode() {
// 比较结果activeName的值
if (this.$route.query.activeName != null) {
this.activeName = this.$route.query.activeName;
}
},
},