【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