Vue项目中常用的两种页面转换方法

也是在做这个项目其中呢涉及到页面的转换，一共有两种方式其实，第一种就是完成一个el-dialog还有一种就是转换一个页面，原理差不多但是里面还有一些东西值得我们去考虑。

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"，返回以后再去执行查询操作，这样就完成了一个父页面点击新增实现跳转到子页面，子页面完成数据提交之后，在跳转回父页面并且完成父页面的刷新的方法。

页面转换的方式

 <div class="mod-demo__correction}"v-show="!addOrUpdateVisible">

首先完成一个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
这就是两种页面跳转的两种方式。