Vue:在同一个页面中进行页面跳转（tab切换的）查询

需求：

最近老板给了我一个需求：就是在部门绩效tab里面有员工查询的条件，需要在部门绩效tab里面输入员工查询的条件跳转到员工绩效tab里面去查询。其中部门名称查询不需要跳转页面查询

我的问题误区：

我始终认为在同一个页面跳转用路由跳转方式就可以。但是我发现不太行。用了很多方法。也有可能我的方法没有用对。后来我问了我的同事，他和我说在同一个页面中（tab切换），我们只需要传tab切换的值就好了，不需要页面路由跳转。我当时一想进入了误区了，太纠结这个问题的原因实现了。

需求页面要求如下：

解决方案：

1. 首先需要员工工号和姓名绑定的值要一致

部门绩效：
		<div v-if="activeName === 'second'" class="search" style="height:160px">
      <div class="tableBar">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="绩效信息" name="first" />
            <el-tab-pane label="部门绩效" name="second" />
            <el-tab-pane label="员工绩效" name="third" />
          </el-tabs>
        </template>
      </div>
      <div
        class="search-form"
        style="margin-left:20px"
      >
        <div>
          <span class="searchSpan">部门：</span>
          <el-input v-model="departmentName" placeholder="请输入部门" />
        </div>
        <div>
          <span class="searchSpan">员工工号：</span>
          <el-input v-model="employeeNumber" placeholder="请输入员工工号" />
        </div>
        <div>
          <span class="searchSpan">员工姓名：</span>
          <el-input v-model="employeeName" placeholder="请输入员工姓名" />
        </div>
        <div>
          <div>
            <el-date-picker
              v-model="departmentTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              class="second_center_form_date"
              @change="changeDepartmentTime"
            />
          </div>
        </div>
      </div>
      <div class="buttons">
        <div style="background: none">
          <div
            class="searchbutton"
            @click="searchDepartment"
          >
            <img src="@/assets/shaixuan.png" style="margin: 10px">
            筛选
          </div>
          <el-button
            type="warning"
            icon="el-icon-refresh"
            @click="reactDepartment"
          >
            重置
          </el-button>
        </div>
      </div>
    </div>
 员工绩效：
 		<div v-if="activeName === 'third'" class="search" style="height:120px">
      <div class="tableBar">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="绩效信息" name="first" />
            <el-tab-pane label="部门绩效" name="second" />
            <el-tab-pane label="员工绩效" name="third" />
          </el-tabs>
        </template>
      </div>
      <div
        class="search-form"
        style="margin-left:20px"
      >
        <div>
          <span class="searchSpan">工号：</span>
          <el-input v-model="employeeNumber" placeholder="请输入工号" />
        </div>
        <div>
          <span class="searchSpan">姓名：</span>
          <el-input v-model="employeeName" placeholder="请输入姓名" />
        </div>
        <div>
          <el-date-picker
            v-model="employeeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="second_center_form_date"
            @change="changeEmployeeTime"
          />
        </div>
      </div>
      <div class="buttons">
        <div style="background: none">
          <div
            class="searchbutton"
            @click="employeeSearch"
          >
            <img src="@/assets/shaixuan.png" style="margin: 10px">
            筛选
          </div>
          <el-button
            type="warning"
            icon="el-icon-refresh"
            @click="reactEmployee"
          >
            重置
          </el-button>
        </div>
      </div>
    </div>

2.一致后，在部门绩效的筛选的方法里面进行操作

2.1 找到筛选方法，在里面进行判断（我的需求是查询部门名称的时候不需要跳转页面的）

// 模糊查询部门绩效
    searchDepartment() {
      // 不在同一个页面不需要路由跳转
      if (this.departmentName === '' || this.departmentName === null) {
        this.activeName = 'third'      ---- tab切换的值
        this.employeeSearch()   ---- 员工绩效搜索的方法
      }
      this.getAllDepartmentPerformanceData()
      this.getDepartmentStatusData()
    },

3. 实现效果如下：

以上就是实现效果，虽然说当时陷入了误区，自己思考的太片面了。希望自己多加学习努力