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

最近在做PC端项目遇到这样一个需求:要求实现点击页面A的“更多”,跳转到页面B中的指定tab“已办事项”一栏,如果我们用传统方式实现起来很简单,但是这次我们用的是vue和element-ui的el-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() //这里写一些跳转后必须要执行的函数
        }
    }
  }
}

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

1. 本站关注web前端开发,分享前端经验和技巧!
2. 喜欢本站的朋友可以收藏(Ctrl + D)本站!
3. 加入QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue和el-tabs实现页面跳转到指定的tab上方法

发表评论

提供最优质的资源集合

立即查看 了解详情