vue 页面跳转

在 作业页面跳转到 学生页面:

<el-table-column prop="status" label="学生详情" align="center"  >
       <template slot-scope="scope">
          <el-button type="text" size="mini" @click="lookStudent(scope.row.id)"  >查看</el-button>
        </template>
     </el-table-column>

js:

    lookStudent(id){
        this.$router.push({name:'OP/homework',query: {'id': id}}) // 只能用 name
    },

LazyLoading.js 中的:

{
    path: 'OP/homework',
    component: () => import('@/views/operatorManage/studentHomework'),
    name: '学生作业详情',
  },

在 studentHomework.vue 中 接收参数:

param: {
          memberCode: '',
          status: '',
          homeworkNo: this.$route.query.id,
          keyword: '',
          pageNum: 1,
          pageSize: 10,
        },
created() {
      this.findList(this.param);
    },
    methods: {
      findList(param) {
        findStudentHomework(param).then(data => {
          this.list = data.list;
          this.total = parseInt(data.total);

        });

      },

homework.js 中的方法:

export function findStudentHomework(params) {
  return request({
    url: `/homework/student/{homeworkNo}/p/{pageNum}-{pageSize}`.format(params),
    method: 'post',
    data: params
  })
}

后台的方法:

    @PostMapping("student/{homeworkNo}/p/{pageNum}-{pageSize}")
    public PageSerializable<StudentHomeworkBo> findHomework(@PathVariable("pageNum") int pageNum,
                                                            @PathVariable("pageSize") int pageSize,
                                                            @PathVariable("homeworkNo") String homeworkNo,
                                                            @RequestBody StudentHomeworkFilter studentHomeworkFilter) {

        PageHelper.startPage(pageNum, pageSize, "update_time desc");
        return homeworkService.findStudentHomework(homeworkNo, studentHomeworkFilter);
    }

二:vue 下载文件:

1、通过a 标签下载:

<span v-if="scope.row.status == '3' && scope.row.ocrResult  && scope.row.ocrResult.origin"> 
                <a :href=" scope.row.ocrResult.origin " download  style="color:blue">下载</a>
</span>

2、window.open 方法:

<el-button type="text" size="mini" @click="downloadResult(scope.row)" v-if="scope.row.status == '3' " >下载</el-button> 

methods 方法:

    downloadResult(row){
      if(row.ocrResult && row.ocrResult.origin){
        window.open(row.ocrResult.origin)
      }
    },

二:页面之间传多个参数:

1、第一个页面:

     lookDocument(row) {
        if (!row) {
          return
        }
        console.log("row")
        console.log(row)
        let param = {
          'content': row.content,
          'subject': row.subject,
          'id': row.id
        }
        setDoucmentContent(param)
        this.$router.push(
          {
            name: 'FR/dquestion',
            params: param
          }
        ) // 只能用 name
      },

2、 在第二个页面中接收:

handleDragEnd(draggingNode, dropNode, dropType, ev){
    
      let param = {
        id: this.$route.params.id,
        content: nodeData,
      };
      console.log(param)
      editDocument(param).then(() => {
        this.$message.success("修改排序成功");
        this.reload();
      });
    },

lazyLoading.js 中不需要改:

  {
    path: 'FR/dquestion',
    component: () => import('@/views/resource/documentQuestion'),
    name: '题库详情',
  },
原文地址:https://www.cnblogs.com/z360519549/p/13603363.html