在做項目的時候,遇到一個需求,內容大致是:
1.有一個Tab選項卡(Tab A 和 Tab B),目前對應兩個頁面(頁面A和頁面B)
2.在頁面A 和頁面B中,都可以跳轉到相應的子頁面 (子頁面A-1,子頁面B-1)
3.在子頁面中頭部有面包屑導航,點擊B-1頁面中的導航,需要跳轉到 Tab B
解決思路:在子頁面B-1頭部的面包屑導航跳轉的時候,傳遞一個參數(shù) active:true,
在Tab頁中接收這個參數(shù),并且判斷,當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>