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。

vue,element 改变tab选项卡选择，点击跳转不同页面

原文：https://www.cnblogs.com/cgb123/p/14267312.html