也是在做这个项目其中呢涉及到页面的转换，一共有两种方式其实，第一种就是完成一个el-dialog还有一种就是转换一个页面，原理差不多但是里面还有一些东西值得我们去考虑。
就是通过弹窗的方式，其实就是完成一个弹窗，首先呢，我们需要先引入这个el-dialog组件
import AddOrUpdate from './defect-rectification-notice-addorupdate'根据具体的路径完成一个组件页面的引入，并且取名叫做AddOrUpdate，然后根据规则定义一个组件，按照驼峰的形式AddOrUpdate 转换成组件的名字
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>在template标签里面添加一个组件 为了是这个页面的组件能够成功显示我们需要使用v-if，如果是v-if的结果是false的话，这个组件就不会显示，当然为了实现这个功能，我们需要先给定一个默认值，
addOrUpdateVisible: false,然后我们完成触发的方法，
<el-button type="primary" @click="addOrUpdateHandle()" size="small">新建</el-button>完成新建的按钮
addOrUpdateHandle(id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) },因为是dialog所以可以直接在原有的页面进行操作，显示dialog的时候直接将dialog的v-if设置为true即可。 this.$nextTick(()这是Vue生命周期中的钩子函数的其中之一，在显示的时候加以操作，然后就是this.$refs.addOrUpdate.init(id)使用this.$refs.组件名.组件方法(参数)，组件名称是在设定的时候通过ref="addOrUpdate"设定组件的名称变成refs的直接使用。
然后我们在组件里面，组件中的主体是在<el-dialog :visible.sync="dialogFormVisible" :title="title">里面的，通过:visible.sync="dialogFormVisible"绑定一个boolean值来完成对于dialog的显示，然后:title="title"完成对于弹窗的题目的设定，在我的设计中新增和修改是一个页面所有这里的题目并没有写死，通过是否能够获得显示的实体类的id是否为空来进行判定。 然后展示init方法
init(ids) { this.dialogFormVisible = true; this.getProductionPlanList() this.getSysDeptList() this.getConstructionUnitList() this.getSysRoleList() this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (ids == undefined || ids === undefined || ids == null) { this.title='新增' } else { this.getInfo(ids) this.title='修改' } }) },所有的v-if想要产生效果都需要设定默认值才能够使用 在这里具体逻辑就是this.dialogFormVisible = true;显示dialog，然后就是this.getProductionPlanList()完成下拉菜单的信息，下面的那些List也是一样的，然后就是判断是否有主键被传回来，有的话就去使用getinfo方法将对象显示出来，如果没有就直接显示表单。 如果想要是dialog消失，可以写一个按钮是dialogFormVisible=false，
<el-button size="mini" @click="dialogFormVisible = false">取消</el-button>然后我们来看一个小细节
我们完成数据的新增如何返回原来页面，也就是在dialog里面完成了数据的新增或者其他操作，如何使页面返回并且显示我们新增或者的其他的数据。 this.dialogFormVisible = false; this.$emit('refreshDataList')这就是我们完成数据库的新增以后的操作，将dialog显示为false，使用this.$emit('refreshDataList')返回之前的页面，我们之前在父组件中也定义了这个@refreshDataList="getDataList"，返回以后再去执行查询操作，这样就完成了一个父页面点击新增实现跳转到子页面，子页面完成数据提交之后，在跳转回父页面并且完成父页面的刷新的方法。
首先完成一个v-show的显示操作，设定上一个属性 注意一定要有默认值在data里面
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>这就是组件，具体的如何引入组件在文章的上面有我就不粘贴重复的代码了
addOrUpdateHandle(id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) },以上都是在父页面里面的代码几乎都出现过 然后在子组件中完成取消的方法
cancel() { this.$nextTick(() => { this.$emit("refreshDataList", false); }) },主要是this.$emit("refreshDataList", false);通过传递false来完成一个子组件中的属性的转换成false 这就是两种页面跳转的两种方式。
