vue 区分新增，编辑，查看页面

工作中经常会遇到编辑，新增，查看共享一个页面，因为后台的接口编辑和新增都是写在一起的，唯一不同的是id

先说说我要实现的功能：我想要点击新增的时候，路由跳转一个页面，编辑的时候也跳转，查看也跳转，这三个就页面来说没有任何区别，区别在于页面绑定值不同，新增的时候不需要绑定值，页面没有数据，用户输入数据，点击确定就ok了；点击编辑按钮之前我们要调用一次查询按钮，查询当前用户之前是否存在数据，如果没有的话添加一条数据，如果有的话用户还想修改数据，则这时候需要调用编辑的接口，总而言之，编辑的时候要调用查询详情接口，然后调用修改的接口，查看的话只需要调用查询详情的接口，然后将值绑定在页面上。
下面具体来看下：
页面效果是这样滴~
这三个按钮共用一个页面

新增~

编辑~

查看~

查看只是一个数据绑定的过程，所以没有可供选择输入框

那又有一个问题，如何让画红色区域没有可输入框只是展示效果？？
这个时候只需要v-if判断路由跳转过来的参数是否是查看，是就显示查看内容，不是显示其他内容。

还有个问题，如何区分路由跳转参数，以及如何判断？

首先，你要在列表页的编辑，查看，新增的按钮处给他绑定同名函数（不同名也可以，但是处理来有点麻烦），把函数传入的参数作为区分函数执行的功能，如下：
因为新增没有id，所以不需要id，编辑查看，需要将列表id携带过去。

然后再拎一个组件，这个组件实现新增，查看，编辑功能，获取传入的‘edit’，‘see’，‘add’还有id，

接下来就按部就班写新增，查看，编辑功能了，
查看如下

红色的是接口，每个公司封装的接口不是一样的，黄色主要实现后台返回很多数据，但是只绑定页面需要的数据

这样就可以实现了~

关键一点：按钮处绑定相同函数，新同事携带不同的参数，谜底区分新增还是编辑还是查看，另一个组件获取这个类型和id，然后查看就带着id调用查看接口，新增和编辑的时候将相同的参数提出来，发请求一个带id一个不带id，就酱~~