路由跳转（携带参数）

第一个页面用下拉列表选值，值在第二个页面input输入框显示且不可改动

1.先创建两个下拉列表

<el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      style="padding-top:200px"
    >
      <el-row :gutter="15">
        <el-form-item label="产线" prop="field102">
          <el-select
            v-model="formData.field102"
            placeholder="请选择产线"
            clearable
            :style="{ width: '90%' }"
          >
            <el-option
              v-for="(item, index) in field102Options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺文件名" prop="field103">
          <el-select
            v-model="formData.field103"
            placeholder="请选择工艺文件名"
            clearable
            :style="{ width: '90%' }"
          >
            <el-option
              v-for="(item, index) in field103Options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
</el-form>

2.创建一个button按钮，用@click绑定

 <el-button type="primary" @click="workRepoprt">上报</el-button>

3.在methods中写入方法，传递参数

methods：{

   workRepoprt () {
      this.$router.push({
        path: '/index',
        query: {
          code: this.formData.field102,
          prog: this.formData.field103
        }
      })
    }

}

4.在第二个页面中创建input输入框

<el-form-item prop="field103">
  <el-input v-model="formData.field103" placeholder="" readonly clearable ></el-input>
</el-form-item>

<el-form-item prop="field102">
  <el-input v-model="formData.field102" placeholder="" readonly clearable ></el-input>
</el-form-item>

注：readonly只读（无法修改输入框的内容，只能只读）

5.在下面methods中接收第一个页面传递过来的参数

 methods: {
    getParam () {
      console.log(this.$route.query.code)
      console.log(this.$route.query.prog)
      this.formData.field103 = this.$route.query.code
      this.formData.field102 = this.$route.query.prog
    }
}

效果图

第一页传递参数

                                

第二页接收参数