vue页面引入另一个页面

需求描述

• 定时任务管理页面，在页面里点击查看日志按钮，弹框显示该任务执行的日志
  

• 有单独的日志页面，该页面可以查看所有任务执行的日志记录
  

• 为了避免写重复代码，在定时任务页面的查看日志弹窗里引入日志页面

实现思路

1. 日志页面要想被引入，首先要导出，所以要在export default里面添加name属性，引入的时候通过导出的name查找组件

export default {
    name: 'lamlog'
}

2. 在任务页面引入日志页面，定义组件名

import lamlog from '@views/page/job/lamlog.vue';
export default {
    components: { lamlog }
}

3. 在任务页面使用日志页面组件
   注意： 上一步中的components的名字和使用时组件的关系，如果components名字为lamLog，则组件名字为lam-log或者lamLog，即 < lam-log >或< lamLog >

4. 点击任务页面的查看日志按钮时，需要传递任务编号参数到日志页面，这样才能过滤当前任务的日志

（1） 日志页面配置props传值

• type为参数类型
• default为参数默认值，参数类型为object时，default默认值需要用函数的方法指定
• required表示参数是否必传，因为当前页面需要使用，所以required为false

export default {
    props: {
        query: {
            type: Object,
            default: function () {
                let obj = {
                    pageNum: 1,
                    numPerPage: 10,
                    dateFrom: '',
                    dateTo: '',
                    jobId: ''
                };
                return obj;
            }
        }
    }
}    

（2）任务页面传递参数，参数在点击查看按钮时生成。

//参数对象
queryLog:{
    jobId: '',
    pageNum: 1,
    numPerPage: 10,
},
//点击查看日志按钮，传递item对象
doShowLog(item) {
    this.showLog = true;
    //传参对象内容
    this.queryLog.jobId = item.jobId; 
},

完整代码

1. 日志页面

2. 任务页面