vue,element 改變tab選項卡選擇，點擊跳轉不同頁面

選擇左邊不同tabs選項，點擊提交時跳轉對應頁面。

element

<el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="一般項目入園申請" name="General" ></el-tab-pane>
          <el-tab-pane label="應急項目入園申請" name="Security"></el-tab-pane>
</el-tabs>

vue

<script>
export default {
  data() {
    return {
      activeName: 'General',
      path: 'General',
      //默認
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.name === 'General'){
        this.path = 'General'
      }
      else if(tab.name === 'Security'){
        this.path = 'Security'
      }
    },
    toPage(){
      this.$router.push({path:this.path})
    }
  }
}
</script>

根據element 的el-tab-pane下的name來設置（當然不一定用name）path。

通過element自身的事件handleClick(tab,event),來給點擊的tabs選項卡的name，付給path（有個初始默認）。

綁定提交事件toPage（），路由跳轉。this.path的path就是被點擊的選項卡的name。