vue頁(yè)面params傳值的坑

a.vue向b.vue傳值

a.vue

this.$router.push({
? ? path: '/payType',
? ? query: {
? ? ? ? putUpList: this.putUpList,
? ? ? ? name:'111'
? ? },
? ? params:{
? ? ? ? cartList: this.cartList,
? ? ? ? totalMoney: this.totalMoney
? ? }
});

b.vue

mounted:function(){
? ? console.log(this.$route.params)
? ? console.log(this.$route.query)
}

坑來(lái)了~

query可以拿到，params拿不到

需要在注冊(cè)路由的地方給路由加上name參數(shù)

const router = new VueRouter({
? ? routes:[{
? ? ? ? ...
? ? },{
? ? ? ? path:'/payType',
? ? ? ? name:'inputComp',
? ? ? ? component: payType
? ? }]
})

a.vue跳轉(zhuǎn)路由的地方同樣加上name參數(shù)，b.vue就可以拿到params了

this.$router.push({
? ? path: '/payType',
? ? name: 'inputComp',
? ? query: {
? ? ? ? putUpList: this.putUpList,
? ? ? ? name:'111'
? ? },
? ? params:{//一定要設(shè)置name，才可以傳params
? ? ? ? cartList: this.cartList,
? ? ? ? totalMoney:this.totalMoney
? ? }
});

vue跨頁(yè)面?zhèn)髦档木?/h2>

眾所周知，以前開發(fā)者只要掌握HTML、CSS、JavaScript 三駕馬車就能勝任一份Web前端的工作。而在技術(shù)日新月異的現(xiàn)在，Vue, React，Angular在代替舊的前端框架已經(jīng)是大勢(shì)所趨了。

vue簡(jiǎn)介

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

是一個(gè)興起的前端js庫(kù)，是一個(gè)精簡(jiǎn)的MVVM。從技術(shù)角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，通過(guò)對(duì)數(shù)據(jù)的操作就可以完成對(duì)頁(yè)面視圖的渲染。

與ajax比較

vue本身不支持ajax請(qǐng)求，需要借助vue-resource,axios插件。vue2官方推薦axios,是一個(gè)基于Promise的HTTP請(qǐng)求客戶端，不再對(duì)vue-resource進(jìn)行維護(hù)和更新。

axios([options]) ?
axios.get(url[,options]);

傳參方式：

1. 通過(guò)url傳參
2. 通過(guò)params選項(xiàng)傳參

axios.post(url,data,[options]);

axios默認(rèn)發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)格式是Request Payload，并非我們常用的Form Data格式，所以參數(shù)必須要以鍵值對(duì)形式傳遞，不能以json形式傳參

傳參方式：

1. 自己拼接為鍵值對(duì)
2. 使用transformRequest，在請(qǐng)求發(fā)送前將請(qǐng)求數(shù)據(jù)進(jìn)行轉(zhuǎn)換
3. 如果使用模塊化開發(fā)，可以使用qs模塊進(jìn)行轉(zhuǎn)換 

axios本身并不支持發(fā)送跨域的請(qǐng)求，沒(méi)有提供相應(yīng)的API，作者也暫沒(méi)計(jì)劃在axios添加支持發(fā)送跨域請(qǐng)求，所以只能使用第三方庫(kù)

ajax傳參格式

ajax是jquery封裝的一個(gè)前端方法，通過(guò)請(qǐng)求后臺(tái)API接口方式，用以局部刷新和動(dòng)態(tài)展示頁(yè)面。

$.ajax({
    url: "http://localhost:8082/boot/request/parameter",
    type: "post",
    contentType: "application/json;charset=utf-8",
    data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}),
    success: function (json) {
        console.log(json);
    }
});

vue傳參格式

場(chǎng)景：點(diǎn)擊父頁(yè)面的XX查詢按鈕，彈出子頁(yè)面queryView，父頁(yè)面選中的某行記錄值傳到子頁(yè)面中，子頁(yè)面請(qǐng)求后臺(tái)Api關(guān)聯(lián)查詢并展示父頁(yè)面選中記錄對(duì)應(yīng)的明細(xì)記錄。

• 在父頁(yè)面定義方法query()
• const rows為父頁(yè)面查詢列表選中的某行記錄
• queryView為子頁(yè)面
• params 為定義的傳值對(duì)象
• callback 回調(diào)方法

query() {
      let title = "XX查詢"
      const rows = this.$refs.multipleTable.selection;
      this.$dialog.modal(queryView, {
        title: title,
        width: 1200,
        height: 600,
        params: {domain: Object.assign({}, rows[0])},
        callback: data=> {
          if(data.flag == true)
            this.queryData()
        }
      });
    }

子頁(yè)面中定義接收參數(shù)對(duì)象，接收參數(shù)對(duì)象有3種格式：變量、對(duì)象、常量

這里定義為對(duì)象 Object

props:{
    domain: {
      type: Object,
      default: function() {}
    }
  }

調(diào)用后臺(tái)api接口關(guān)聯(lián)查詢并展示

• params 定義方法中變量，獲取從父頁(yè)面接收的對(duì)象中的屬性值
• this.operat4Data(XXApi.getList, params, null, null); 調(diào)用后臺(tái)api接口及傳參

queryData() {
      let params = {apiParams:this.domain.apiParams};
      let respData =  this.operat4Data(XXApi.getList, params, null, null);
      respData.then( data => {
        this.dataList = data.posts;
        this.total = data.count;
      });
    }

vue的優(yōu)勢(shì)

vue因其極具方便靈活易用等特性，為廣大前端開發(fā)者所推崇和使用。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。