vue和el-tabs实现页面跳转到指定的tab上方法
最近在做 PC 端项目遇到这样一个需求:要求实现点击页面 A 的“更多”,跳转到页面 B 中的指定 tab“已办事项”一栏,如果我们用传统方式实现起来很简单,但是这次我们用的是 vue 和element-ui
的el-tabs
组件共同实现,个人觉得有一定的学习价值,特此记录一下。
A 页面:
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() //这里写一些跳转后必须要执行的函数 } } } }
到这里,就可以实现我们预期的效果,此代码都是码云笔记博主亲测使用,所以大家可以放心拿去使用,当然更重要的还是希望能够为大家提供一个参考性的例子,如果大家有更好的方法欢迎下方留言评论。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue和el-tabs实现页面跳转到指定的tab上方法
码云笔记 » vue和el-tabs实现页面跳转到指定的tab上方法