vue项目实现页面内的跳转

页面内tab标签的跳转

1、首先写出Tab标签页

<el-tabs v-model="activeCourseName" @tab-click="handleClick">
  <el-tab-pane label="所有课程" name="AllCourse">    
  </el-tab-pane>
  <el-tab-pane label="实训课程" name="Practicing">   
  </el-tab-pane>
  <el-tab-pane label="MOOC" name="MOOC">   
  </el-tab-pane>
</el-tabs>

2、写出打开页面后显示第一个标签页

 activeCourseName: "AllCourse",

3、对标签页进行判断

 getData(){
      const options = {}
      switch(this.activeCourseName){
        case 'Practicing':
          options.isExperiment = true
          break
        case 'MOOC':
          options.isExperiment = false
          break
      }

4、最后和平时引用接口一样，进行渲染

 getUserCourse(options)
      .then((res) => {
        this.myCourseList = res.data.list;
      })
      .catch((err) => {
        this.error(err.msg);
      });
    }

上面就是我对标签页跳转的代码操作，特别注意的就是需要判断一下跳转哪个标签页