vue和el-tabs实现页面跳转到指定的tab上方法

最近在做 PC 端项目遇到这样一个需求:要求实现点击页面 A 的“更多”,跳转到页面 B 中的指定 tab“已办事项”一栏,如果我们用传统方式实现起来很简单,但是这次我们用的是 vue 和element-uiel-tabs组件共同实现,个人觉得有一定的学习价值,特此记录一下。

A 页面:

A 页面

B 页面:

B 页面

先看一下 el-tabs 的代码:

<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-tabs>
</div>

data 数据:

data(){
  return{
    activeName:'first'
  }
}

首先,在页面 A 跳转路由时将activeName带上。

这里先补充一个零基础的知识点,对router-link:to$router.push的理解。

1、<router-link:to='/myroute'>跳转到我的路由</router-link>

  • 使用 router-link 方式跳转,会在页面渲染的时候就加载对应的路由
  • 比起直接写<a href = ' '>的方式的优点:不管是 h5 的 history 还是 hash 模式,切换的时候很方便;会默认阻止浏览器的默认事件;写路径的时候不用写基路径了。

2、$router.push(‘/myroute’)

  • 跳转到对应的路径,可在页面中写对应的点击事件,然后执行对应的方法中写跳转,可在跳转前再写一些别的逻辑。
  • 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

所以,我在实现这一功能时使用到$router.push,在页面 A 跳转路由时将activeName带上。

this.$router.push({path:'/workMatters?activeName=second'});

然后在页面 B 接收:

mounted(){
  this.showtabs();
},
method:{
  showtabs(){
    if(this.$route.query.activeName!=null){
        (this as any).activeName = this.$route.query.activeName;
        let current1 = this.activeName;
        if(current1=='second'){
          this.getDoneTableData() //这里写一些跳转后必须要执行的函数
        }
    }
  }
}

到这里,就可以实现我们预期的效果,此代码都是码云笔记博主亲测使用,所以大家可以放心拿去使用,当然更重要的还是希望能够为大家提供一个参考性的例子,如果大家有更好的方法欢迎下方留言评论。

「点点赞赏,手留余香」

8

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue和el-tabs实现页面跳转到指定的tab上方法

发表回复