最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue和el-tabs实现页面跳转到指定的tab上方法

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发