Element UI 之Tab选项卡跳转问题
2018-09-13 本文已影响0人
壹二叁
在做项目的时候,遇到一个需求,内容大致是:
1.有一个Tab选项卡(Tab A 和 Tab B),目前对应两个页面(页面A和页面B)
2.在页面A 和页面B中,都可以跳转到相应的子页面 (子页面A-1,子页面B-1)
3.在子页面中头部有面包屑导航,点击B-1页面中的导航,需要跳转到 Tab B
解决思路:在子页面B-1头部的面包屑导航跳转的时候,传递一个参数 active:true,
在Tab页中接收这个参数,并且判断,当active=true时,改变Tab的activeName为Tab B
Tab 页面:
<el-tab-pane label="Tab A" name="0">
<Tab A></Tab A>
</el-tab-pane>
<el-tab-pane label="Tab B" name="1">
<Tab B></Tab B>
</el-tab-pane>
data() {
return {
activeName: '0',
active:this.$route.query.active
}
},
created(){
if(this.active==true){
this.activeName='1'
}
},
子页面:
<el-breadcrumb-item :to="{ name: 'TAB' ,query:{active:true}}">TAB</el-breadcrumb-item>