vue技巧：从A页面跳转到B页面的tab选项卡指定页

水星记_

已于 2025-06-09 16:01:05 修改

阅读量7.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： element 文章标签：前端 vue

于 2021-10-12 12:23:54 首次发布

本文链接：https://blog.youkuaiyun.com/Shids_/article/details/120719525

element 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何在Vue和ElementUI框架中实现在A页面跳转到B页面时，使B页面的选项卡自动切换到指定页。通过在A页面路由中传递activeName参数，并在B页面的mounted生命周期钩子中读取并设置activeName，从而达到平滑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

当我们在使用 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;
        }
      },
  },