【Vue】Vue.js：从列表到详情页面，如何传值，如何控制是否可编辑，按钮是否显示

一、问题

1.1、环境
电脑环境：Windows 10；
开发工具：WebStorm；
JS框架：Vue.js;

1.2、问题
【Vue】我们写前段页面，一个经常遇到的场景就是页面传值，除了我们之前说过的高耦合的父子页面之间的引用，还有一种场景就是低耦合的两个页面之间的跳转和传参，今天总结下一下3个问题：
1.源头页面如何传值，目的地页面如何接收；
2.如何控制是否可编辑；
3.如何控制按钮是否显示；

二、解答

1.列表传值我们有两种模式：
①.是在路由中定义一个基本的字段，路由中的json的Key已经固定，无法改变，唯一可以改变的是value的值；例如：
A.【原始页面】的js中：

//详情按钮对应的方法
handleDetail(params) {
  this.$router.push({path: "/getDetail/" + params.row.id});
},

B.【中间路由层】：

{
   path: '/getDetail/:id',
   name: '详情页面跳转',
   component: resolve => require(['@/views/Pages/User/Detail'], resolve)
},

C.【目的地页面】接收参数

let param = {};
params.id = this.$route.params.id;

②如果要传送多个参数怎么办？第2种方式就是，讲原始页面需要传递的参数，打包成Json，通过Json对象传递；这里我们用vue.js中传参特别适用的query对象来传递，用query的好处是，刷新详情页面，query中的数据还能够保留，不会丢失；

A.【源头页面】的JS中：

// 详情按钮对应的方法
handleDetail(params) {
 this.$router.push({path: "/getDetail/" , query:{id:params.row.id,disabled:true}});
},

B.【路由页面】
不需要特别定义所传对象的key，因为被query这个特殊的传参json对象包办了；

{
 path: '/getDetail',
 name: '获取详情',
 component: resolve => require(['@/views/Pages/Detail'], resolve)
              },

C.【接收页面】JS中

  let params = {};
  params.id = this.$route.query.id;
  params.disabled = this.$route.query.disabled;

2.如何设置表单从编辑按钮跳转过来，则可编辑；从详情页面跳转过来，则不可编辑？
只需要在form标签上加上这么一句即可：

:disabled="this.$route.query.disabled"

总体效果就是：

<el-form :model="dataForm":disabled="this.$route.query.disabled">
//中间是你的详情字段 .....
</el-form>

3.如何设置部分按钮隐藏，比如，通过详情按钮查看详情时，不显示保存按钮，则：

<el-button @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>

参考文章：

【vue中页面跳转传值的几种方式】

完毕~

三、总结

喜欢我的博客，欢迎点赞，评论，收藏，转发~

欢迎关注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公众号：幕桥社区

知乎：张牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
简书： https://www.jianshu.com/u/02c0096cbfd3