vue实现从A页面跳转到B页面的tab选项卡的指定页上

导读:本篇文章讲解 vue实现从A页面跳转到B页面的tab选项卡的指定页上,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

需求效果

在这里插入图片描述


实现思路

  • 在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) {
                if (event.name == "first") {
                    this.$router.push({
                        path: "/roadCheck?activeName=first",
                    });
                }
                 else if (event.name == "third") {
                     this.$router.push({
                         path: "/roadCheck?activeName=third",
                     });
                 }
                else if (event.name == "fourth") {
                    this.$router.push({
                        path: "/roadCheck?activeName=fourth",
                    });
                } else if (event.name == "five") {
                    this.$router.push({
                        path: "/roadCheck?activeName=five",
                    });
                }
            },

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;
        }
      },
  },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79435.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!